if all conditions true
Question
I'm trying to build a game using JQuery in which the object is to get all the columns to be dark. 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. 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.
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;
}
});
});
2 answers
solution1
1 ACCPTED 2015-12-24 22:35:59
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.
$('.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. 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:
.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!');
});
solution2
0 2015-12-24 22:42:08
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.
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.