Tworzenie zmiennych w pętli for

Question

Witam, męczę się i męczę i nie mogę sobie poradzić. Chciałbym uprościć ten kod:

var c0 = $('#c0')[0];
var c1 = $('#c1')[0];
var c2 = $('#c2')[0];
var c3 = $('#c3')[0];

var c4 = $('#c4')[0];
var c5 = $('#c5')[0];
var c6 = $('#c6')[0];
var c7 = $('#c7')[0];

var c8 = $('#c8')[0];
var c9 = $('#c9')[0];
var c10 = $('#c10')[0];
var c11 = $('#c11')[0];

c0.addEventListener('click', function() { revealCard(0) });
c1.addEventListener('click', function() { revealCard(1) });
c2.addEventListener('click', function() { revealCard(2) });
c3.addEventListener('click', function() { revealCard(3) });
c4.addEventListener('click', function() { revealCard(4) });
c5.addEventListener('click', function() { revealCard(5) });
c6.addEventListener('click', function() { revealCard(6) });
c7.addEventListener('click', function() { revealCard(7) });
c8.addEventListener('click', function() { revealCard(8) });
c9.addEventListener('click', function() { revealCard(9) });
c10.addEventListener('click', function() { revealCard(10) });
c11.addEventListener('click', function() { revealCard(11) });

Pomyślałem, że mogę to zapisać w pętli for, niestety nie daje mi to identycznego rezultatu.

Moja pętla:

for (var i=0; i<cards.length; i++){
    var zmienna = document.getElementById('c'+1);
    zmienna.addEventListener('click', function(){ revealCard(i) });
}

Próbowałem również na tablicach:

var c=[];

for (var i=0; i<cards.length; i++){
    c[i] = document.getElementById('c'+i);
    console.log(c[i]);
    c[i].addEventListener('click', function(){ revealCard(i) });
}

Niestety nie mogę uzyskać takiego samego rezultatu (np. c11.addEventListener('click', function() { revealCard(11) });)

 

Prosiłbym o wskazówki, z góry dzięki.

shead: Zła kategoria (przeniesione z C++)

Comments

Niezbyt rozumiem, co ma znaczyć zapis

var c0 = $('#c0')[0];

odwołujesz się do pierwszego elementu o identyfikatorze c0, przecież na stronie może być tylko jeden element o konkretnym id?
Pętla for jak najbardziej by zadziałała, tylko zamiast 1 daj zmienną i, której wartość się zmienia wraz z iteracją pętli

Answer 1

Spróbuj tak:

(fragment z odcinka 5 o JScript)

Tutaj tworzysz zmienną  c0 i przypisujesz do niej uchwyt.

var c0 = document.getElementById('c0');

tutaj bierzesz zmienną c0 i przypisujesz do niej tzw "event" - zdarzenie.

c0.addEventListener("click", function() { revealCard(0); });

tak było w zadaniu

Więc można to połączyć omijając tworzenie zmiennej:

document.getElementById('c0').addEventListener("click", function() { revealCard(0); });

to jest to samo co wyżej tyle że w jednej instrukcji z pominięciem tworzenia zmiennej.

Teraz pasuje to przerobić i puścić w pętli 12 razy:
 

for (var i=0; i<12; i++){
    document.getElementById('c'+i).addEventListener("click", function() { revealCard(i); });
}

Tutaj zaczynają się schody, niby wszystko ok a nie działa! Dzieje się tak dlatego, ponieważ JS ma swój specyficzny zasięg zmiennych. I gdy tworzymy zmienną var i ma ona zasięg funkcyjny a nie blokowy. Rozwiązaniem jest zmiana var i na let i - to zadziała na nowych wersjach przeglądarek ale już IE10 tego nie obsłuży bo tworzenie zmiennych przy pomocy let jest dość świeże.

Można to obejść przez sztuczkę - tzw domknięcie

for(var i=0; i<12; i++){
	(function (e){
	document.getElementById("c"+ e).addEventListener("click", function() { revealCard(e); });
})(i);
}

to już zadziała nawet na IE;)

Trochę zagmatwane, polecam poczytać na temat domknięcia i zasięgu zmiennych w JavaScript bo może to zaoszczędzić sporo czasu w przyszłości.

A tu wersja z wykorzystaniem JQuery:

for(var i=0; i<=11; i++){
	(function (e){
	$("#c"+ e).click(function() { revealCard(e); });
})(i);
}

Pozdrawiam.

 

 

Answer 2

var zmienna = document.getElementById('c'+i);

 

 

Comments

i warto zamienić var i = 0 na let i = 0;

@jking potestuj: https://jsfiddle.net/a71bpzug/

Answer 3

Twoja pierwsza próba jest prawie prawidłowa

for (var i=0; i<cards.length; i++){
    var zmienna = $('#c' + i);  // zmiana 1 na i robi robotę
    zmienna[0].addEventListener('click', function(){ revealCard(i) });
}

Jednak aby dodać event listenery możesz korzystać z jQuery:

for (var i=0; i<cards.length; i++){
    $('#c'+ i).click(function(){ revealCard(i) });
}

Albo skorzystać z selektora wildcard i cały kod, który umieściłaś uprościć do jednej linijki: 

$("[id^=c").click(function(){ /* ... */ });

I nie ma potrzeby używania pętli z tym, że ten ostatni jest niebezpieczny i użyje wszystkich elementów z ID zaczynającymi się od "c", lepiej użyć innego, bardziej unikatowego początku ID albo wybierać po klasie obiektu, a w dodatku trzeba pobrać wartość liczbową z ID (np. regex) więc lepiej przekazać po prostu cały obiekt.

Answer 4

A nie lepiej po prostu

const c = [...document.querySelectorAll('.c')]; // oczywiście dodaj wszystkich tym c jakąś swoją klasę

c.forEach((item, i) => item.addEventListener('click', () => {
     console.log(item); // twoj item
     console.log(i); // jego indeks w tablicy
});