Question

我的循环遇到了一些麻烦。它似乎不想迭代整个jquery对象并检查.box的每个实例以验证列的背景颜色。该应用程序是一个拼图，当所有列都变暗时完成。当我点击第2列，然后是第4列，然后是第3列时，仍然有两列，即7和9，它们仍然很轻，但程序说这个拼图已经完成了。当我点击特定的列序列时，我无法弄清楚导致过早完成的原因。当通过单击不同的列序列使这些列变暗时，问题就不会发生。

此外，我应该注意，当单击一列时，它的颜色会发生变化，左右两列也会将颜色从浅变为暗，反之亦然。

HTML：

<!DOCTYPE html>
    <html>
        <head>
            <link rel="stylesheet" href="css/style.css">
        </head>
        <body>
            <h1>Puzzle</h1>
            <p>Goal: make all of the columns dark.</p>
            <div class="container">
                <div class="box light"></div>
                <div class="box dark"></div>
                <div class="box light"></div>
                <div class="box dark"></div>
                <div class="box light"></div>
                <div class="box dark"></div>
                <div class="box light"></div>
                <div class="box dark"></div>
                <div class="box light"></div>
                <div class="box dark"></div>
            </div>
            <script src="js/jquery-1.11.2.min.js"></script>
            <script src="js/app.js"></script>
        </body>
    </html>

CSS：

h1, p {
    text-align: center;
}

.container {
    display: flex;
}

.box {
    flex: 1;
    margin: 3em .75em;
    height: 200px;
    display: inline-block;
    cursor: pointer;
}

.light {
    background: rgb(221, 211, 211);
}

.dark {
    background: rgb(51, 51, 51);
}

和JS：

//click on box
$('.box').click(function(){
    //check box color
    var $background = $(this).css('background-color');
    if ($background === 'rgb(51, 51, 51)') {
        //change to light #CCC
        $(this).css('background-color', 'rgb(221, 221, 221)');
    } else {
        //change to dark #333
        $(this).css('background-color', 'rgb(51, 51, 51)');
    }

    if ($(this).is(':not(:first-child)')) {
        var $backgroundLeft = $(this).prev().css('background-color');
        if ($backgroundLeft === 'rgb(51, 51, 51)') {
            //change to light #CCC
            $(this).prev().css('background-color', 'rgb(221, 221, 221)');
        } else {
            //change to dark #333
            $(this).prev().css('background-color', 'rgb(51, 51, 51)');
        }
    }

    //check right box color
    if ($(this).is(':not(:last-child)')) {
        var $backgroundRight = $(this).next().css('background-color');
        if ($backgroundRight === 'rgb(51, 51, 51)') {
            //change to light #CCC
            $(this).next().css('background-color', 'rgb(221, 221, 221)');
        } else {
            //change to dark #333
            $(this).next().css('background-color', 'rgb(51, 51, 51)');
        }
    }

    function isComplete() {
      var failed = false;
      $('.box').each(function(){
        if ($(this).css('background-color') === 'rgb(221, 221, 221)') {
            failed = true;
            return false;
        }
      });
      return (!failed) ? true : false;
    }

    if(isComplete()) {
        alert('Puzzle completed!');
    }
});

Answer 1

您应该尝试使用.hasClass() jQuery函数，而不是检查背景颜色。因此，请检查它是否包含课程dark或light。但即使这样也没有必要（检查小提琴）

更好的检查完成可能是：

function isComplete() {
    return $('.box').length === $('.box.dark').length;
}

对于咯咯笑声我也是自己的小提琴：

Fiddle here

Answer 2

不确定您的问题，但您应该使用.toggleClass()功能。

使您的javascript更简单

添加了PierreDuc对小提琴的改动，似乎在一些有限的测试中工作正常。

https://jsfiddle.net/zfsu3n0c/1/

$('.box').click(function(){
    //check box color
    $(this).toggleClass("light dark");

    if ($(this).is(':not(:first-child)')) {
        $(this).prev().toggleClass("light dark");
    }

    //check right box color
    if ($(this).is(':not(:last-child)')) {
        $(this).next().toggleClass("light dark");
    }

    // Use PierreDuc's is complete
    function isComplete() {
      return $('.box').length === $('.box.dark').length;
    }

    if(isComplete()) {
        alert('Puzzle completed!');
    }
});

循环不遍历所有元素

2 个答案: