如果所有條件都成立

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