代码在这里:http://jsfiddle.net/jaredasch1/6dhc240q/5/
我知道我以前问过这个问题，但我无法得到有效的答案。我正在开发一款游戏，它以 4 x 4 网格开始，当您单击其中一个 div 时，它会切换上面、下面以及接下来两个被单击的 div 的颜色。这部分工作得很好，当它们都是其他颜色时，它们会切换回原来的颜色。然而，我现在正在尝试做的事情却带来了更多的挑战。一旦它们都是第二种颜色，我想添加另一个列和行并将它们重置回原始颜色。
这就是我遇到麻烦的地方。由于某种原因，没有重新创建网格。这就是你们发挥作用的地方。我需要帮助编写一个函数或编辑我的原始脚本才能实现这一点。我把这一切都放在 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);
欢迎任何帮助!
最佳答案
虽然我认为您的 HTML 和 JavaScript 都可以进行更多改进，但以下是使其正常工作的最低要求:
首先，由于每行的 block 数(以及行数)将会发生变化，因此您不能使用硬编码的 .eq(4)不再过滤。您需要跟踪具有该数字的变量，并为每个新级别添加 1。
var blocksPerRow = 4;
替换所有硬编码的.eq(4)至.eq(blocksPerRow)现在。
每当您想向每一行添加新 block 时，您都必须找到 <br>元素并在其后添加一个新 block 。您可以通过克隆随机 block 来简单地创建一个新 block (我选择了第一个)。请使用 true克隆时的参数也复制绑定(bind)到它的事件:
var newBlock = $('.block:first');
$('br').after( newBlock.clone(true) );
您还想添加一整行，因此您可以使用之前的变量并添加那么多 block ，或者只获取最后一个 br加上所有后面的元素并克隆它们。将它们附加在最后一个 block 之后。
var newRow = $('br:last').nextAll().andSelf();
$('.block:last').after( newRow.clone(true) );
现在是时候更新你的变量了
blocksPerRow++;
最后要做的事情是修复样式。您使用内联 block 并依靠元素之间的空格来创建空白。当您克隆最后一行时，这种情况就会中断，但无论如何，最好还是依赖实际边距来确定间距。这成功了:
.block {
float: left;
display: block;
margin: 3px;
}
br {
clear: both;
}
这里您可以看到一个工作示例:jsFiddle
如您所见，我添加了一个“作弊”按钮，以便您可以快速亲自检查它是否有效。
关于javascript - 如何添加 Div 的行/列，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25950721/