javascript - 如何将列/行添加到 Div 网格-6ren

javascript - 如何将列/行添加到 Div 网格

转载作者：行者123 更新时间：2023-11-28 12:43:16

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

我知道我以前问过这个问题，但我无法得到有效的答案。我正在开发一款游戏，它从 4 x 4 网格开始，当您单击其中一个 div 时，它会切换上方、下方和接下来两个被点击的 div 的颜色。这部分工作得很好，当它们都是其他颜色时，它们会切换回原始颜色。然而，我现在正在尝试做的事情提出了更多的挑战。一旦它们都是第二种颜色，我想添加另一列和一行并将它们重置回原始颜色。

这是我遇到麻烦的地方。由于某种原因，不会重新创建网格。这就是你们进来的地方。我需要帮助编写一个函数或编辑我的原始脚本来实现这一点。我把这一切都放在 JSFiddle 上 here

我还将在此处发布所有代码。

    <!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);

欢迎任何帮助!

最佳答案

非常简单:只需使用 .append() 添加一个新行checkAll() 逻辑中的函数当您确定用户已“完成”游戏时运行，即:

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 事件绑定(bind)到 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: 在开发游戏时，最好包含一个“作弊”按钮(在本例中，将所有 <div> 标记为 .on 类)，这样您就不必通过整个游戏本身来检查某个新功能是否有效；)

对您的代码的其他评论:

您可能想考虑更改 mouseenter和 mouseleave进入 CSS :hover事件，因为您只是在做淡入淡出，这可以通过过渡和不透明度轻松完成
更新标记，使您使用 <br />而不是 <br>
实际上，不要使用 <br />根本因为它在你的情况下没有语义意义。它用于文本的换行符。相反，您可以将所有 block float 到左侧

如果您想查看稍微修改过的代码，可以在这里查看:http://jsfiddle.net/teddyrised/6dhc240q/7/

关于javascript - 如何将列/行添加到 Div 网格，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25944066/