Jak najłatwiej zrobić siatkę 8 x 8przyciski z najmniejszą ilością kodu? Wiem, że mógłbym użyć tabeli i umieścić 64 pojedyncze przyciski, ale wydaje mi się to trochę nudne. Chodzi o to, aby mieć 64 przyciski, które są obrazem o rozmiarze ikony. Każdy przycisk musi być jakoś wyjątkowy. Chcę każdy przycisk on.("click") zniknąć prawdopodobnie za pomocą .hide(). Sprawdziłem kilka sposobów, aby to zrobić, żaden z nich nie jest bardzo pomocny i zacząłem próbować zrobić siatkę 8 x 8 z 64 pojedynczymi przyciskami, ale kto chce to zrobić!
Odpowiedzi:
2 dla odpowiedzi № 1Możesz to zrobić dość łatwo, używając podstawowej pętli, aby dynamicznie dołączać elementy do kontenera w dokumencie.
HTML
<div id="container"></div>
Javascript z 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);
}
});
Proszę zanotować
Ten przykład to tylko jeden szybki sposób, aby to zrobić. Przyciski są unoszone obok siebie, ale zawijają się automatycznie po wszystkich 8 przyciskach, ponieważ szerokość kontenera jest odpowiednio ustawiona (8 x (50px + 5px margines) = 440px)
Elementy nie są naprawdę usuwane po kliknięciu. Mógłbyś zrobić this.remove() zamiast dodawać removed klasa po kliknięciu, ale w tym przykładzie spowodowałoby to, że sąsiednie pływaki spadłyby o jedną pozycję (dla każdego usuniętego przycisku).
Dlatego ten przykład ma na celu jedynie pomoc w zrozumieniu zasad dynamicznej zmiany struktury dokumentu poprzez dodawanie / modyfikowanie elementów w locie.