用jquery制作一个动态网格

我想用jquery创建一个动态网格，它最终会随着用户输入（即16x16,32x32等）而改变。我的逻辑是在每行中创建16行，然后再创建16个方块，但是我无法使广场追加正确的数量。用jquery制作一个动态网格

$(document).ready(function() { 
    for (var i = 0; i < 16; i++) { 
     $('.grid').append("<div class = 'row'></div>"); 
     //$('.row').width(($('.square').width().val() * i); 
     //for (var i = 0; i < 16; i++) { 
      $('.row').append("<div class='square'></div>"); 
    // } 
    } 
});

这里是什么样子的链接：https://lettda.github.io/EtchAsketch/

来源

2016-08-16 lettda

移动你内for循环外for循环应该创建方块的适当量的外，因为这样的：

for (var i = 0; i < 16; i++) { 
    $('.grid').append("<div class = 'row'></div>"); // Each grid gets 16 rows 
} 

for (var i = 0; i < 16; i++) { 
    $('.row').append("<div class='square'></div>"); // Each row gets 16 squares 
}

显式设定的宽度行是没有必要的，因为它会自动成为你广场的宽度的16倍加上你添加的任何填充/边距。请注意，所有的方块在CSS中都需要display: inline-block;以确保它们并排排列。而且，如果每行中有太多正方形或正方形太宽，这些行就会缠绕。

来源

2016-08-16 00:51:34

.row选择所有这些都是类row的元素，这意味着你没有追加.squarediv s到只有最后创建的行，你也将它们追加到所有以前创建的。

为了防止这种情况，你可以做这样的事情。

for (var i = 0; i < 16; i++) { 
    var row = $("<div class = 'row'></div>"); 
    for (var j = 0; j < 16; j++) { 
     var square = $("<div class='square'></div>"); 
     row.append(square); 
    } 
    $('.grid').append(row); 
}

for (var i = 0; i < 16; i++) { 
    $('.grid').append("<div class='row' id='row"+i+"'></div>"); 
    for (var j = 0; j < 16; j++) { 
     $('#row'+i).append("<div class='square'></div>"); 
    } 
}

来源

2016-08-16 00:51:13 Titus

用jquery制作一个动态网格

回答

相关问题