如果所有条件都成立

if all conditions true

本文关键字：有条件 如果      更新时间：2023-09-26

我正试图使用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;
        } 
    });

});

试试这个：

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

});

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

如果这个数字是零（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>

相关文章：