Question

代码在这里：http://jsfiddle.net/jaredasch1/6dhc240q/5/

我知道我之前已经问过这个问题，但我无法得到一个有效的答案。我正在开发一个以4乘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);

欢迎任何帮助！

Answer 1

虽然我认为您的HTML和JavaScript都可以使用更多的改进，但这是实现这一目标的最低要求：

首先，由于每行的块数（以及行数）将会发生变化，因此您无法再使用硬编码的.eq(4)过滤器。您需要使用该数字跟踪变量，并为每个新级别添加1。

var blocksPerRow = 4;

立即将所有硬编码的.eq(4)替换为.eq(blocksPerRow)。

每当您想要为每一行添加新块时，您必须找到<br>元素并在其后添加新块。你可以通过克隆一个随机的块来创建一个新块（我选择了第一个）。克隆时使用true参数也可以复制绑定到它的事件：

var newBlock = $('.block:first');
$('br').after( newBlock.clone(true) );

您还想添加整行，因此您可以使用之前的变量并添加许多块，或者只抓住最后br以及后面的所有项目并克隆它们。在最后一个块之后追加它们。

var newRow = $('br:last').nextAll().andSelf();
$('.block:last').after( newRow.clone(true) );

现在是时候更新你的变量了

blocksPerRow++;

最后要做的是修复样式。您使用内联块并依赖元素之间的空间来创建空格。克隆最后一行时会中断，但最好还是依靠实际的边距来进行间距。这就是诀窍：

.block {
    float: left;
    display: block;
    margin: 3px;
}
br {
    clear: both;
}

在这里，您可以看到一个有效的示例：jsFiddle

正如你所看到的，我添加了一个“作弊”按钮，这样你就可以快速检查它是否有效。

Answer 2

首先，好概念......

其次，你有一些问题，让我们从基础开始，这样你就可以继续你的游戏了：

......它从一个4乘4格开始......

你有没有听过这个表达，如果你的代码看起来像是复制/粘贴，你做错了吗？好吧，让我们从一个网格开始：

您要启动的代码是：

<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>

如果你做这个动态怎么样？

function buildGrid(elm, rows, columns){
    for(iRow = 0; iRow < rows; iRow++)
    {
        elm.append("<br>");
        for(iCol = 0; iCol < columns; iCol++)
        {
            elm.append('<div class="block hover"></div>');
        }
    }
}

然后刚刚调用：

buildGrid($("body"), 4, 4);

示例：http://jsbin.com/tunun/1/edit?html,css,js,output

您可以轻松地在全局变量中添加网格大小

var globalRows = 4, globalColumns = 4;

$(function() {
  buildGrid($("body"), globalRows, globalColumns);
});

稍后可以更轻松地添加行/列...

我想添加另一列和行......

所以，您需要两件事：添加新的列/行并使所有事件在新的添加行/列中工作

1 - 从上面的示例中，您可以简单地执行：

buildGrid($("body"), ++globalRows, ++globalColumns);

或更多，手动：

globalRows++; // same as globalRows = globalRows + 1;
globalColumns++;  // same as globalColumns = globalColumns + 1;
buildGrid($("body"), globalRows, globalColumns);

2 - 要使所有的evens都能使用新的动态添加对象（html节点），你需要稍微更改一下你的javascript：

$("div").mouseenter(function () {
    $(this).fadeTo("slow", 0.25);
    $(this).css('cursor', 'pointer');
});

jQuery会将该事件附加到所有现有 div的...而不是在执行此代码后添加的那些事件，为此，{{ 3}}和上面的代码将写成：

$("body").on("mouseenter", "div", function () {
    $(this).fadeTo("slow", 0.25);
    $(this).css('cursor', 'pointer');
});

我希望这可以帮助您完成任务

Answer 3

您的HTML中的一个缺陷是，您无法根据自己在网页上的位置来管理区块的位置。将每行块分组为一个额外的div有助于放置。从那里，您可以使用jQuery克隆一组块并将其附加到正文，除了向每行添加一个块。将点击功能重置为新行和块的代码可能需要工作，主按钮的CSS可能需要针对新按钮进行调整，但我会留给您。

HTML

http://jsfiddle.net/2069ox68/3/
<!DOCTYPE html>
<body>
    <div id="button" class="on hover"></div>
    <div class="grid">
        <div class="row">
            <div class="block hover"></div>
            <div class="block hover"></div>
            <div class="block hover"></div>
            <div class="block hover"></div>
        </div>
        <div class="row">
            <div class="block hover"></div>
            <div class="block hover"></div>
            <div class="block hover"></div>
            <div class="block hover"></div>
        </div>
        <div class="row">
            <div class="block hover"></div>
            <div class="block hover"></div>
            <div class="block hover"></div>
            <div class="block hover"></div>
        </div>
        <div class="row">
            <div class="block hover"></div>
            <div class="block hover"></div>
            <div class="block hover"></div>
            <div class="block hover"></div>
        </div>
    </div>
</body>

JS / JQuery的

var main = function () {
    var checkAll = function () {
        var allDivs = $("div.block");
        var classedDivs = $("div.block.on");

        var allDivsHaveClass = (allDivs.length === classedDivs.length);

        if (allDivsHaveClass) {
            $('div.row:first').clone(true, true).appendTo($('div.grid'));
            var allRows = $("div.row");
            $("div.block:first").clone(true, true).appendTo(allRows);
            var allDivs = $("div.block");
            allDivs.removeClass("on");

        }
    };

    $("div.block").mouseenter(function () {
        $(this).fadeTo("slow", 0.25);
        $(this).css('cursor', 'pointer');
    });
    $("div.block").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);

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;
}

如何添加Div的行/列

3 个答案: