检查具有不同ID的3个div是否具有相同的背景颜色-checkif3divswithdifferentidshavethesamebackgroundcolor

I've had a similar issue previously where I wanted to check if the background color is white and I've followed that solution which worked so I tried to do the same to check if 3 divs with different id's have the same background color but it only works with one of them, as soon as I add the other two ids it stops working

我以前有一个类似的问题,我想检查背景颜色是否是白色,我已经按照那个有效的解决方案,所以我试着做同样的事情来检查具有不同id的3个div是否具有相同的背景颜色但是它只有当其中两个ID添加时,它才能与其中一个一起工作

var counter=0;                   
 $(".circles").click(function() {
    counter++;
    if (counter % 2 === 0 && $(this).css("background-color") == whiteColor) {
        $(this).css("background-color", "black");
        $(".p1").css("font-weight", "bold");
        $(".p2").css("font-weight", "normal");
        var blackColor = $(this).css({
            backgroundColor: 'black'
        }).css('backgroundColor');


    } else if (counter % 2 === 1 && $(this).css("background-color") == whiteColor) {
        $(this).css("background-color", "red");
        $(".p2").css("font-weight", "bold");
        $(".p1").css("font-weight", "normal");
        var redColor = $(this).css({
            backgroundColor: 'red'
        }).css('backgroundColor');

    }


if ($("#one").css("background-color") == blackColor && $("#two").css("background-color") == blackColor && $("#three").css("background-color") == blackColor) {
$(".circles").hide();
};

})

HTML

any idea how to fix this without redoing the whole code and use toggleclasses which would be the other alternative.

任何想法如何解决这个问题,而无需重做整个代码并使用toggleclasses,这将是另一种选择。

1 个解决方案

     var counter=0;  

             $(".circles").click(function() {
  var blackColor=''; 
        var redColor='';  
                counter++;
                if (counter % 2 === 0 && $(this).css("background-color") == whiteColor) {
                    $(this).css("background-color", "black");
                    $(".p1").css("font-weight", "bold");
                    $(".p2").css("font-weight", "normal");
                    blackColor = $(this).css({
                        backgroundColor: 'black'
                    }).css('backgroundColor');


                } else if (counter % 2 === 1 && $(this).css("background-color") == whiteColor) {
                    $(this).css("background-color", "red");
                    $(".p2").css("font-weight", "bold");
                    $(".p1").css("font-weight", "normal");
                    redColor = $(this).css({
                        backgroundColor: 'red'
                    }).css('backgroundColor');

                }


            if ($("#one").css("background-color") == blackColor && $("#two").css("background-color") == blackColor && $("#three").css("background-color") == blackColor) {
            $(".circles").hide();
            };

            })