如何將列/行添加到Divs網格

Question

代碼在這里： http : //jsfiddle.net/jaredasch1/6dhc240q/5/

我知道我之前曾問過這個問題，但我無法為此找到有效的答案。 我正在開發一款游戲，該游戲以4 x 4網格開始，當您單擊一個div時，它將切換上，下，下兩個以及被單擊的div的顏色。 這部分工作得很好，當它們都是其他顏色時，它們會切換回原始顏色。 但是，我現在想做的事情帶來了更多的挑戰。 一旦它們都是第二種顏色，我想添加另一列和一行，並將它們重置為原始顏色。

這是我遇到麻煩的地方。 由於某種原因，未重新創建網格。 你們是從這里來的。我需要幫助編寫一個函數或對我的原始腳本進行編輯以實現此目的。 我有這一切對的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);

歡迎任何幫助！

Answer 1

這非常簡單：當您確定用戶“完成”了游戲時，只需在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()方法將.on() ，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：開發游戲時，最好包括一個“作弊”按鈕（在這種情況下，將所有<div>標記為.on ），這樣您就不必遍歷整個游戲本身就可以了。檢查某個新功能是否有效；）

您的代碼的其他注釋：

您可能需要研究將mouseenter和mouseleave更改為CSS :hover事件，因為您只是在進行淡入淡出，而這可以通過過渡和不透明度輕松完成
更新標記，以便您使用<br />而不是<br>
實際上，根本不要使用<br /> ，因為在您的情況下，它沒有語義。 它用於文本的換行符。 相反，您可以將所有塊浮動到左側

如果您想查看經過稍微修改的代碼，可以在這里查看： http : //jsfiddle.net/teddyrised/6dhc240q/7/

如何將列/行添加到Divs網格

問題描述

1 個解決方案

解決方案1
2 2014-09-20 00:45:19

如何將列/行添加到Divs網格

問題描述

1 個解決方案

解決方案1 2 2014-09-20 00:45:19

解決方案1
2 2014-09-20 00:45:19