Question

用最少量的代码制作8 x 8网格按钮的最简单方法是什么？我知道我可以用一张桌子放64个单独的按钮，但这对我来说似乎有点乏味。我们的想法是拥有64个按钮，这些按钮都是图标大小的图片。每个按钮都必须以某种方式独特。我希望每个按钮on.('click')可能会使用.hide()消失。我已经查了几个方法来做到这一点，没有一个是非常有用的，我已经开始尝试制作一个64 x个按钮的8 x 8网格，但是谁想要这样做呢！

Answer 1

您可以使用基本循环轻松地将元素动态附加到文档中的容器中。

<强> HTML

<div id="container"></div>

使用jQuery的Javascript

$(document).ready(function(){
    var el;
    for(var i=1; i<=64; i++){
        el = document.createElement('div');
        $(el).addClass('button');
        $(el).on('click', function(){
            $(this).addClass('removed');
        });
        $('#container').append(el);
    }
});

See this fiddle for a demonstration

请注意

这个例子只是一种快速的方法。按钮相互浮动，但在所有8个按钮后自动换行，因为容器宽度相应设置（8 x（50px + 5px margin）= 440px）

单击时，元素并未真正删除。您可以执行this.remove()而不是在点击时添加removed类，但在此示例中，它会导致相邻的浮点数向后退一个位置（对于每个删除的按钮）。

因此，此示例仅用于帮助您了解动态更改文档结构的原则，方法是动态添加/修改元素。

一大块按钮

1 个答案: