如果所有条件都成立

Question

我正在尝试使用JQuery构建游戏，其中的对象是使所有列都变暗。 当您单击一列时，它的颜色从暗变为亮，并且其左右两列的颜色将从暗变为亮，或从亮变为暗，具体取决于它们的起始颜色。

我被困在最后一部分，我需要在.each（）循环中遍历整个div集，以查看它们的所有背景是否都是深色的。 如果是这样，我希望弹出一个警报以说拼图已完成。 如果找到我的第一个错误陈述，我就会打破循环。 但是我不知道是如何遍历div的集合，如果所有div都符合条件（即它们都具有深色背景），那么请显示警告框，表示难题已结束。

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

提示：

您也可以设置十六进制颜色，实际上，您可以通过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;

如果此数字为零（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