Большая сетка кнопок

Question

Большая сетка кнопок

0

Каков самый простой способ сделать сетку 8 x 8 с наименьшим количеством кода? Я знаю, что могу использовать стол и накладывать 64 отдельных кнопки, но это кажется мне немного утомительным. Идея состоит в том, чтобы иметь 64 кнопки, которые являются изображением размера значка. Каждая кнопка должна быть уникальной. Я хочу, чтобы каждая кнопка была нажата on.('click') .hide() on.('click') чтобы исчезнуть, вероятно, используя .hide(). Я искал несколько способов сделать это, ни один из них не очень полезен, и я начал пытаться создать сетку размером 8 х 8 из 64 отдельных кнопок, но кто хочет это сделать!

SquareCat 14 дек. 2013, в 22:40

Источник

1

И в чем вопрос?
Robin 14 дек. 2013, в 21:22
1

Используя простой for цикла?
undefined 14 дек. 2013, в 21:23
0

«Какой самый простой способ сделать сетку кнопок 8 х 8 с наименьшим количеством кода?»
user2755667 14 дек. 2013, в 21:23
1

Используйте 64 плавающих левых делителя, каждый восьмой имеет класс, который устанавливает свойство clear для начала новой строки. Это не подходящий вариант использования для таблиц.
halfer 14 дек. 2013, в 23:10

Показать ещё 2 комментария

Теги:

jquery

html

css

1 ответ

Ещё вопросы

«Какой самый простой способ сделать сетку кнопок 8 х 8 с наименьшим количеством кода?»
Используйте 64 плавающих левых делителя, каждый восьмой имеет класс, который устанавливает свойство clear для начала новой строки. Это не подходящий вариант использования для таблиц.

SquareCat · Accepted Answer · 2013-12-14T20-11-00.000Z

Вы можете сделать это довольно легко, используя базовый цикл для динамического добавления элементов в контейнер в документе.

HTML

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

Javascript с jQuery

$(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);
    }
});

Смотрите эту скрипку для демонстрации

пожалуйста, обратите внимание

Этот пример - всего лишь один быстрый способ сделать это. Кнопки перемещаются рядом друг с другом, но автоматически завершаются после всех 8 кнопок, потому что ширина контейнера установлена соответственно (8 x (50px + 5px margin) = 440px)

Элементы на самом деле не удаляются при нажатии. Вы можете сделать this.remove() вместо добавления removed класса при клике, но в этом примере это приведет к тому, что смежные поплавки будут отступать на одну позицию (для каждой удаленной кнопки).

Поэтому этот пример предназначен только для того, чтобы помочь вам понять принципы динамического изменения структуры вашего документа путем добавления/изменения элементов "на лету".

Это решение, которое я бы также реализовал. Я, вероятно, добавил бы атрибут ID i в цикле.