如何添加新行/列

问题描述：

我正在开发一款游戏，并且遇到了一些麻烦。我想要做的是一旦所有的块变成紫色，我想创建一个新的行和列。我尝试在所有块都是紫色后删除所有块，然后使用变量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);

我对建议开放，所以请回答！

你有什么问题？它在做什么，而不是它应该做什么？ – 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>');

答

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

答

一个小建议是正确地构建你的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将给出列数

我以前试过，然后会发生什么，当我点击一个，上下的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

相关推荐