如果所有条件都成立

Question

I'm trying to build a game using JQuery in which the object is to get all the columns to be dark. 我正在尝试使用JQuery构建游戏，其中的对象是使所有列都变暗。 When you click on one column, it's color changes from dark to light and the columns to its left and right will change from dark to light, or light to dark, depending on their starting color. 当您单击一列时，它的颜色从暗变为亮，并且其左右两列的颜色将从暗变为亮，或从亮变为暗，具体取决于它们的起始颜色。

I'm stuck on the last part where I need to iterate through the entire set of divs in an .each() loop to see if all of their backgrounds are dark. 我被困在最后一部分，我需要在.each（）循环中遍历整个div集，以查看它们的所有背景是否都是深色的。 If so, I want an alert to pop up to say that the puzzle is completed. 如果是这样，我希望弹出一个警报以说拼图已完成。 I am breaking the loop if I find my first false statement. 如果找到我的第一个错误陈述，我就会打破循环。 But what I can't figure out is how to iterate through the set of divs and if ALL of them meet the conditions (ie they all have a dark background), then present the alert box signifying the end of the puzzle. 但是我不知道是如何遍历div的集合，如果所有div都符合条件（即它们都具有深色背景），那么请显示警告框，表示难题已结束。

HTML: 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: CSS：

.container {
    display: flex;
}

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

.light {
    background: #DDD;
}

.dark {
    background: #333;
}

JS: 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

Try this: 尝试这个：

   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: 提示：

you can set color in hex too, actually, you change the css property via javascript, so you can use all supported formats. 您也可以设置十六进制颜色，实际上，您可以通过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)');

Use same CSS property in JS and in CSS. 在JS和CSS中使用相同的CSS属性。 like this: 像这样：

.dark {
    background: #333;
}

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

don't do this! 不要这样做！

.light {
    background: #DDD;
}

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

Improved code: 改进的代码：

CSS: CSS：

.light {
    background-color: #ddd;
}

.dark {
    background-color: #333;
}

JS: 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;

Get all de divs (with class box) and which do not have the class dark => if this number is zero (0), than it means that all the boxes are dark. 如果此数字为零（0），则获取所有de div（带类框）并且不具有深色=>类，这意味着所有框都为深色。

 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 个解决方案

解决方案1
1 已采纳 2015-12-24 22:35:59

解决方案2
0 2015-12-24 22:42:08

如果所有条件都成立

问题描述

2 个解决方案

解决方案1 1 已采纳 2015-12-24 22:35:59

解决方案2 0 2015-12-24 22:42:08

解决方案1
1 已采纳 2015-12-24 22:35:59

解决方案2
0 2015-12-24 22:42:08