Uproszczony skrypt odpowiedzialny za dodanie class nie działa

Question

var d = new Array(4);
d[0] = $('#main-dishes');
d[1] = $('#soups');
d[2]  = $('#side-dish');
d[3]  = $('#drinks');

for(i=0; i<=3; i++){
  d[i].click( function() { dish_check(d[i]); });
}

function dish_check(nr){
    for(i=0; i<=3; i++){
      d[i].removeClass("active");
    }
    nr.addClass("active");
}

Napisałem skrypt odpowiedzialny za pokazanie aktywnej kategorii, wykorzystujący bibliotekę jQuery. Dodaje on klasę .active do buttona, dzięki czemu button zmienia background-color oraz color. Wszystko było w porządku, więc zacząłem upraszczać kod. Niestety, ale uproszczony nie działa, a konsola pokazuje następujące błędy:

menu.js:16 Uncaught TypeError: Cannot read property 'addClass' of undefined
    at dish_check (menu.js:16)
    at HTMLButtonElement.<anonymous> (menu.js:9)
    at HTMLButtonElement.dispatch (jquery.min.js:2)
    at HTMLButtonElement.y.handle (jquery.min.js:2)

Comments

Prawie nie korzystasz z jQuery. Więc może napisz to w czystym JS?. Sprawdź za pomocą console.log() czym jest nr w twojej funkcji.

---

Korzystam z niego mało, gdyż dopiero zacząłem się go uczyć, ale powoli chcę go wdrażać do swojego kodu. Console.log() pokazuje wartość "undefined", więc to jest powód błędu. Tylko dlaczego zmienna nr nie zawiera posłanej do niej tablicy?

---

Czyli masz odpowiedź.

---

Tak, wiem co jest powodem. Pytanie brzmi: dlaczego zmienna nr nie zawiera tablicy do niej posłanej?

Answer 1

Tak, wiem co jest powodem. Pytanie brzmi: dlaczego zmienna nr nie zawiera tablicy do niej posłanej?

Taka śmieszna cecha JSa:

for(i=0; i<=3; i++){
  setTimeout(function(){console.log(i);}, 100);
}

Wyświetli 4 razy "4", bo zmienna `i` po 100 milisekundach ma wartość 4.

Ale już to raczej powinno zadziałać:

for(i=0; i<=3; i++){
  let val = i;
  setTimeout(function(){console.log(val);}, 100);
}

 

Comments

Dziękuję bardzo za pomoc, teraz działa