如何添加新行/列

我正在開發一款遊戲，並且遇到了一些麻煩。我想要做的是一旦所有的塊變成紫色，我想創建一個新的行和列。我嘗試在所有塊都是紫色後刪除所有塊，然後使用變量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);

我對建議開放，所以請回答！

來源

2014-09-19 Jasch1

你有什麼問題？它在做什麼，而不是它應該做什麼？ – Barmar 2014-09-19 18:43:59

聖牛，這有點上癮。 – burmat 2014-09-19 18:56:12

@Barmar我想添加一個clumn和row，只要checkAll = true – Jasch1 2014-09-19 21:19:57

在checkAll（），添加以下內容：

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

來源

2014-09-19 18:49:29 Jean

只要把每行變成一個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/

來源

2014-09-19 18:54:17 juvian

一個小建議是正確地構建你的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())

然後$（「行」）。長度將給予數行和$（$（'。row'）[0]）。length將給出列數

來源

2014-09-19 19:02:58

我以前試過，然後會發生什麼，當我點擊一個，上下的div不會改變 – Jasch1 2014-09-19 19:12:01

爲了在'$（「（）.block「）。click'而不是'$（this）.nextAll（）。eq（4）.toggleClass（」on「）;''你可以使用'var col = $（this）.siblings（）。index這個）;''（this）.parent（）。prev（）。children（）。eq（col）.toggleClass（「on」）;'和$（this）.parent（）。next（）。兒童（）。eq（col）.toggleClass（「on」）;' – 2014-09-19 19:40:32

這在開始時增加了一行，並且如何改變上下顏色的變化 – Jasch1 2014-09-19 19:58:09

如何添加新行/列

回答

相關問題