我正在尝试使用 JQuery 构建一个游戏，其中的目标是让所有列都变暗。当您单击一列时，它的颜色会从深色变为浅色，并且其左侧和右侧的列将从深色变为浅色，或从浅色变为深色，具体取决于其起始颜色。
我陷入了最后一部分，我需要在 .each() 循环中迭代整个 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!');
});
关于javascript - 如果所有条件都为真，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34458327/