Question

我正在玩游戏而且我遇到了一些麻烦。我想要做的是，一旦所有的块变成紫色，我想创建一个新的行和列。我试图通过在所有块都是紫色之后删除所有块来实现这一点，然后使用变量rowVal创建比上次更多的行和列。我一直在研究JSFIddle，链接是http://jsfiddle.net/jaredasch1/6dhc240q/。我会在下面发布代码，以便您快速查看

HTML

<!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 rowVal = 5;
    var setUp = function () {
        for (var i = 0; i < rowVal; i++) {
            $("#button").append("<br>");
        }
        for (var k = 0; k < rowVal; k++) {
            $("<br>").append("<div class=\"block hover\"></div>");
        }
        rowVal++;
    };
    var checkAll = function () {
        var allDivs = $("div.block");
        var classedDivs = $("div.block.on");

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

        if (allDivsHaveClass) {
            allDivs.remove(".on");
            setUp();
        }
    };
    $("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

在checkAll（）中，添加以下内容：

$("body").append('<br><div class="block hover"></div>');

Answer 2

将每行放入带有类行的div中，然后执行以下操作：

var setUp = function () {
    $('.row').each(function(){
        $(this).prepend('<div class="block hover"></div>'); // add one more block to existing rows
    })
    $('body').append($('.row:eq(0)').clone()) // add one row
};

这是完整的jsfiddle：http://jsfiddle.net/juvian/6dhc240q/1/

Answer 3

一个小小的建议是正确地构建你的HTML

<!DOCTYPE html>
<body>
    <div id="button" class="on hover"></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 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>
</body>

然后添加新列，您可以使用

$('.row').each(function(){$(this).append('<div class="block hover"></div>');})

要添加新行，您只需克隆行

即可

$('body').append($($('.row')[0]).clone())

然后$（＆＃39; .row＆＃39;）。长度会给出行数和$（$（＆＃39; .row＆＃39;）[0]）。length会给出列数< / p>

如何添加新行/列

3 个答案: