Get Index from element Difference Color

by HYEONGJINKIM

HTML

<div id="box" class="lv2" style="width: 500px; height: 500px;">
    <span style="background-color: rgb(197, 234, 228);"></span>
    <span style="background-color: rgb(92, 129, 123);"></span> 
    <span style="background-color: rgb(92, 129, 123);"></span>
    <span style="background-color: rgb(92, 129, 123);"></span>
</div>

JavaScript

$(function(){
    var $box = $("#box")
    var checkColor = function(){
        var color = null;
        var nIdx = 0;
        $box.find('>span').each(function(i){
            if(!color) color = $(this).css('backgroundColor');
            console.log(color+":::::"+$(this).css('backgroundColor'));
            console.log(color !== $(this).css('backgroundColor'))
            if(color !== $(this).css('backgroundColor')){
                nIdx = i;
                return false;
            }            
        });        
        return nIdx
    }
    
    var activateTarget = function(){
        var nCheck = checkColor();        
        if(nCheck>=1){
            $box.find('>span').eq(nCheck).trigger('click');
        }else{
            $box.find('>span').eq(nCheck).trigger('click');
            $box.find('>span').eq(0).trigger('click');
        }
    }
    
    //activateTarget();
    
    setInterval(function(){
        activateTarget();
    }, 200);
    
});