Javascript 如何添加div的行/列_Javascript_Jquery_Html_Css_Dom Manipulation

Javascript 如何添加div的行/列

javascript jquery html css

Javascript 如何添加div的行/列,javascript,jquery,html,css,dom-manipulation,Javascript,Jquery,Html,Css,Dom Manipulation,代码如下：我知道我以前问过这个问题，但我没能得到一个有效的答案。我正在做一个游戏，它以一个4乘4的网格开始，当你点击其中一个div时，它会切换上面、下面和下两个div的颜色——点击的那一个。这部分工作非常好，当它们都是其他颜色时，它们会切换回原始颜色。然而，我现在试图做的更多是一个挑战。一旦它们都是第二种颜色，我想添加另一列和行，并将它们重置为原始颜色这就是我遇到麻烦的地方。由于某些原因，网格不会重新创建。这就是你们进来的地方。我需要hep编写一个函数或编辑我的原始脚本来实现这一点。我把这一

代码如下：

我知道我以前问过这个问题，但我没能得到一个有效的答案。我正在做一个游戏，它以一个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>

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都可以使用更多的改进，但以下是最基本的要求：

首先，由于每行的块数（以及行数）将发生变化，因此不能再使用硬编码的

.eq（4）

过滤器。您需要跟踪具有该数字的变量，并为每个新级别向其添加1

var blocksPerRow = 4;

立即将所有硬编码的

.eq（4）

替换为

.eq（块箭头）

每当您想向每一行添加一个新块时，您必须找到一个

元素，并在其后添加一个新块。您可以通过克隆一个随机块（我选择了第一个）来创建一个新块。克隆时一定要使用

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

这里您可以看到一个工作示例：

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

首先，这是一个不错的概念

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

…它从一个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>

例如：

您可以轻松地将网格大小添加到全局变量中，如下所示：

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-要使所有even都能使用新的动态添加的对象（html节点），您需要稍微更改javascript，如下所示：

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

jQuery将把该事件附加到所有现有的

div

。。。不是在执行此代码后添加的，因此，上面的代码将编写为：

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

我希望这对您的任务有所帮助
您是否可以至少添加一个演练，使所有块都变成第二种颜色？我很想帮你调试，但我真的没有时间来找出这个游戏的解决方案。顺便说一下，我觉得我只是帮你做了功课。请从中学习一些东西，不要只是复制粘贴并交上来。+1实际上，你的答案和我的答案都是空洞作业：）我只是想给他一些开场白，而不是告诉他一切：P@StephanMuller我对jQuery比较陌生，所以我“我正在尽可能多地学习。现在我正在调整一些东西，添加一个页脚，然后我可能会完成这个项目。到目前为止，这是一次很棒的学习经历+1用于实际解释如何使用JS构建网格。我曾考虑在我的回答中加入这一点，但已经相当冗长了。希望他能从中学到一些东西，尽管现在我看了他的问题历史，我有点怀疑。
globalRows++; // same as globalRows = globalRows + 1; globalColumns++; // same as globalColumns = globalColumns + 1; buildGrid($("body"), globalRows, globalColumns);

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

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