代码在这里:http://jsfiddle.net/jaredasch1/6dhc240q/5/
我知道我以前问过这个问题,但我没能得到一个有效的答案。我正在做一个游戏,它从一个4乘4的网格开始,当你点击其中一个div时,它会切换上面、下面和下两个被点击的div的颜色。这个部分工作得很好,当它们都是其他颜色时,它们会切换回原始颜色。然而,我现在要做的事情带来了更多的挑战。一旦它们都是第二种颜色,我想添加另一列和行,并将它们重置回原始颜色。
这就是我遇到麻烦的地方。由于某些原因,网格没有重新创建。这就是你们的用武之地。我需要hep编写一个函数或编辑我的原始脚本来实现这一点。我在这里的一个JSFiddle 上有这些
我也会在这里发布所有的代码。
<!DOCTYPE html>
<body>
<div id="button" class="on hover"></div>
<br>
<div class="block hover"></div>
<div class="block hover"></div>
<div class="block hover"></div>
<div class="block hover"></div>
<br>
<div class="block hover"></div>
<div class="block hover"></div>
<div class="block hover"></div>
<div class="block hover"></div>
<br>
<div class="block hover"></div>
<div class="block hover"></div>
<div class="block hover"></div>
<div class="block hover"></div>
<br>
<div class="block hover"></div>
<div class="block hover"></div>
<div class="block hover"></div>
<div class="block hover"></div>
</body>
CSS
.block {
height:100px;
width:100px;
border-radius:10px;
display:inline-block;
background-color:#33CCFF;
}
#button {
height:100px;
width:410px;
border-radius:10px;
display:inline-block;
background-color:#FF6666;
margin-bottom:10px;
}
.on {
background-color:#D633FF;
}
JavaScript/jQuery
var main = function () {
var checkAll = function () {
var allDivs = $("div.block");
var classedDivs = $("div.block.on");
var allDivsHaveClass = (allDivs.length === classedDivs.length);
if (allDivsHaveClass) {
allDivs.removeClass("on");
}
};
$("div").mouseenter(function () {
$(this).fadeTo("slow", 0.25);
$(this).css('cursor', 'pointer');
});
$("div").mouseleave(function () {
$(this).fadeTo("slow", 1);
$(this).css('cursor', 'default');
});
$(".block").click(function () {
$(this).toggleClass("on");
$(this).prev().toggleClass("on");
$(this).nextAll().eq(4).toggleClass("on");
$(this).next().toggleClass("on");
$(this).prevAll().eq(4).toggleClass("on");
checkAll();
});
$("#button").click(function () {
$(".block").removeClass("on");
});
$(document).keydown(function (key) {
if (event.which === 32) {
$(".block").removeClass("on");
}
});
};
$(document).ready(main);
欢迎任何帮助!
非常简单:当您确定用户已经"完成"游戏时,只需在checkAll()
函数的逻辑中添加一个带有.append()
函数的新行,即:
if (allDivsHaveClass) {
allDivs.removeClass("on");
$('body').append('<br /> <div class="block hover"></div> <div class="block hover"></div> <div class="block hover"></div> <div class="block hover"></div>');
}
但是,由于现在要处理动态添加的元素,因此必须使用jQuery .on()
方法将mouseenter、mouseleave和click事件绑定到div.block
。您当前使用的是.mouseenter()
、.mouseleave()
和.click()
方法,这对于新添加的元素来说是有问题的,因为在加载页面时,它们最初并不存在于DOM中。换句话说,您将需要使用:
$(document).on('mouseenter', 'div', function () {
// Code here
});
$(document).on('mouseleave', 'div', function () {
// Code here
});
$(document).on('click', '.block', function () {
// Code here
});
我已经测试了你的游戏,我的解决方案有效:http://jsfiddle.net/teddyrised/6dhc240q/6/
p/s:在开发游戏时,最好包含一个"作弊"按钮(在这种情况下,用类.on
标记所有<div>
),这样你就不必遍历整个游戏本身来检查某个新功能是否有效;)
对您的代码的其他评论:
- 您可能想研究将
mouseenter
和mouseleave
更改为CSS:hover
事件,因为您只是在进行淡入,而这可以通过转换和不透明度轻松完成 - 更新标记,以便使用
<br />
而不是<br>
- 实际上,根本不要使用
<br />
,因为它在您的案例中没有语义。它用于文本的换行。相反,您可以将所有块向左浮动
如果您想查看稍微修改过的代码,可以在此处查看:http://jsfiddle.net/teddyrised/6dhc240q/7/