Question

之前我曾遇到过类似的问题，我想检查背景颜色是否为白色，并且我已经按照那个有效的解决方案进行操作，所以我尝试做同样的事情来检查具有不同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

    <div id="line1">
        <div class="circles" id="one">
        </div>
        <div class="circles" id="two">
        </div>
        <div class="circles" id="three">
        </div>
    </div>
    <div id="line2">
        <div class="circles" id="four">
        </div>
        <div class="circles" id="five">
        </div>
        <div class="circles" id="six">
        </div>
    </div>
    <div id="line3">
        <div class="circles" id="seven">
        </div>
        <div class="circles" id="eight">
        </div>
        <div class="circles" id="nine">
        </div>
    </div>

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

Answer 1

变量blackColor的范围仅限于if条件，将blackColor置于if条件之外或使其成为全球

     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();
            };

            })

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

1 个答案: