Question

我试图使用JQuery构建游戏，其中的对象是让所有列都变黑。当您单击一列时，它的颜色会从暗变亮，而左右列将从暗变为浅，或从浅变为暗，具体取决于它们的起始颜色。

我被困在最后一部分，我需要在.each（）循环中迭代整个div组，看看他们的所有背景是否都是黑暗的。如果是这样，我想要一个警告弹出来表示拼图已经完成。如果我发现我的第一个虚假陈述，我就打破了循环。但我无法弄清楚如何迭代div组，如果所有div都符合条件（即它们都有深色背景），那么就会出现表示拼图结束的警告框。 / p>

HTML：

<!DOCTYPE html>
    <html>
        <head>
            <link rel="stylesheet" href="css/style.css">
        </head>
        <body>
            <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：

.container {
    display: flex;
}

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

.light {
    background: #DDD;
}

.dark {
    background: #333;
}

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

    //loop through all boxes, checking background color
    $('.box').each(function() {
        //if any background color is light
        if (this.style.backgroundColor === 'rgb(221, 221, 221)') {
            return false;
        } 
    });



});

Answer 1

试试这个：

   var failed = false;
   var $box = $('.box');
   for(var i=0;i<$box.length;i++){
      if($box.eq(i).css('background').toLowerCase() == '#ddd') {
        failed = true;
        break;
      }
   }
   if(!failed) alert('complete!');

TIPS：

你也可以用十六进制设置颜色，实际上，你通过javascript改变了css属性，所以你可以使用所有支持的格式。

$('.box').css('background-color', 'rgb(221, 221, 221)');
$('.box').css('background-color', '#eee');
$('.box').css('background-color', 'red');
$('.box').css('background-color', 'rgba(255, 0, 0, 0.3)');
$('.box').css('background-color', 'hsl(120, 100%, 50%)');
$('.box').css('background-color', 'hsla(120, 100%, 50%, 0.3)');

在JS和CSS中使用相同的CSS属性。像这样：

.dark {
    background: #333;
}

$('.box').css('background', '#ddd');

不要这样做！

.light {
    background: #DDD;
}

$(this).css('background-color', 'rgb(221, 221, 221)');

改进代码：

CSS：

.light {
    background-color: #ddd;
}

.dark {
    background-color: #333;
}

JS：

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

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

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

   function isComplete(){
      var failed = false;
      var $box = $('.box');
      for(var i=0;i<$box.length;i++){
        if($box[i].css('background').toLowerCase() == '#ddd') {
         failed = true;
         break;
        }
      }
      return (!failed) ? true : false;
   }

   if(isComplete()) alert('complete!');



});

Answer 2

var darkboxes = $(".box").not('.dark').length;

获取所有de div（带有类框）并且没有类dark =＆gt;如果此数字为零（0），则表示所有方框都是暗的。

var darkboxes = $(".box").not('.dark').length;
var darkboxes2 = $(".box2").not('.dark').length;

$("#result").html("number of boxes who are not dark: " + darkboxes);
$("#result2").html("number of boxes2 who are not dark: " + darkboxes2);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="container">
  <div class="box light"></div>
  <div class="box dark"></div>
  <div class="box light"></div>
</div>

<div class="container">
  <div class="box2 dark"></div>
  <div class="box2 dark"></div>
  <div class="box2 dark"></div>
</div>

<div id="result"></div>
<div id="result2"></div>

如果所有条件都成立

2 个答案: