Javascript 如何添加新行/列_Javascript_Jquery_Html_Css

Javascript 如何添加新行/列

javascript jquery html css

Javascript 如何添加新行/列,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我正在做一个游戏，我遇到了一些麻烦。我要做的是，一旦所有的块都变成紫色，我想创建一个新的行和列。我试图通过在所有块都是紫色后删除所有块来实现这一点，然后使用变量rowVal比上次多创建一行和一列。我一直在研究JSFIDLE，链接是。我会把代码贴在下面，这样你可以快速查看 HTML <!DOCTYPE html> <body> <div id="button" class="on hover"></div> <br>

我正在做一个游戏，我遇到了一些麻烦。我要做的是，一旦所有的块都变成紫色，我想创建一个新的行和列。我试图通过在所有块都是紫色后删除所有块来实现这一点，然后使用变量rowVal比上次多创建一行和一列。我一直在研究JSFIDLE，链接是。我会把代码贴在下面，这样你可以快速查看

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>

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

var main=函数（）{
var-rowVal=5；
变量设置=函数（）{
对于（变量i=0；i）；
}
对于（var k=0；k”）追加（“”）；
}
rowVal++；
};
var checkAll=函数（）{
var allDivs=$（“div.block”）；
var classedDivs=$（“div.block.on”）；
var allDivsHaveClass=（allDivs.length==classedDivs.length）；
如果（所有类别）{
全部除名（“.on”）；
设置（）；
}
};
$（“div”）.mouseenter（函数（）{
美元（本）。法代托（“缓慢”，0.25）；
$（this.css（'cursor'，'pointer'）；
});
$（“div”）.mouseleave（函数（）{
美元（这一点）。法代托（“慢”，1）；
$（this.css（'cursor'，'default'）；
});
$（“.block”）。单击（函数（）{
$（this.toggleClass（“on”）；
$（this.prev（）.toggleClass（“on”）；
$（this.nextAll（）.eq（4）.toggleClass（“on”）；
$（this.next（）.toggleClass（“on”）；
$（this.prevAll（）.eq（4）.toggleClass（“on”）；
checkAll（）；
});
$（“#按钮”）。单击（函数（）{
$（“.block”）.removeClass（“on”）；
});
$（文档）.keydown（函数（键）{
if（event.which==32）{
$（“.block”）.removeClass（“on”）；
}
});
};
$（文件）.ready（主）；

我愿意接受建议，所以请回答

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

$("body").append('<br><div class="block hover"></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
};

$（“body”）.append（“
”）；

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

$("body").append('<br><div class="block hover"></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
};

var设置=函数（）{
$（'.row'）。每个（函数（）{
$（this）.prepend（“”）；//向现有行再添加一个块
})
$（'body'）。追加（$（'.row:eq（0）'）。克隆（）//添加一行
};

下面是完整的JSFIDLE:

一个小建议是正确地构造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'）.length将给出行数，$（$（'.row'）[0]）.length将给出列数

您遇到了什么问题？它在做什么而不是应该做什么？天哪，这有点让人上瘾。@Barmar我想在checkAll=truel时添加一个clunn和row我以前尝试过，然后发生的事情是，每当我单击一个，上面和下面的div都不会改变，以在

$（“.block”）中实现这一点。单击而不是$（this.nextAll（）.eq（4）.toggleClass（“开启”）
您可以使用var col=$（this）.siblines（）.index（this）$（this）.parent（）.prev（）.children（）.eq（col）.toggleClass（“开”）
和$（this）.parent（）.next（）.children（）.eq（col）.toggleClass（“on”）这会在开头添加一个额外的行，并搞乱上面和下面的颜色如何变化，然后使用prepend而不是append
$('body').append($($('.row')[0]).clone())