如何将列/行添加到分区网格中

How to Add Columns/Rows to a Grid of Divs

本文关键字：分区 网格 添加      更新时间：2023-09-26

代码在这里：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/

相关文章：