Question

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

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

欢迎任何帮助！

Answer 1

这非常简单：当您确定用户已经完成＆＃34;完成时，只需在.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事件绑定到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：开发游戏时，最好包含一个＆＃34;作弊＆＃34;按钮（在这种情况下，使用班级<div>标记所有.on），这样您就不必通过整个游戏本身来检查某个新功能是否有效;）

对您的代码的其他评论：

您可能希望将mouseenter和mouseleave更改为CSS :hover事件，因为您只是在做淡化，这可以通过过渡和不透明度轻松完成
更新标记，以便您使用<br />代替<br>
实际上，根本不使用<br />，因为它在您的情况下没有语义含义。它用于文本的换行符。相反，您可以将所有块浮动到左侧

如果您想看到略微修改的代码，可以在此处查看：http://jsfiddle.net/teddyrised/6dhc240q/7/

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

1 个答案: