• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

[JS/Jquery] Mnóstwo evenetów dla divów - optymalizacja

VPS Starter Arubacloud
0 głosów
162 wizyt
pytanie zadane 6 sierpnia 2018 w JavaScript przez MrxCI Dyskutant (8,260 p.)

Witam, w mojej grze posiadam ekwipunek który ma załóżmy ~200 miejsc, każde miejsce ma id o nazwie "slotx" gdzie x jest liczbą okienka/slotu, licząc od 1 (1,2,3,4...198,199,200 - okienek na itemy).

kliknięcie diva (nazywanego dalej slotem przezemnie), powoduje wywołanie funkcji active(x) gdzie x jest dokladnie tą samą liczbą co numer w ID slotu, poniżej przedstawie kod w jaki sposób obecnie wygląda i działa

 

$(`#slot1`).click(()=>{
                                active(1);
                                ;});

$(`#slot2`).click(()=>{
                                active(2);
                                ;});

$(`#slot3`).click(()=>{
                                active(3);
                                ;});

...

$(`#slot199`).click(()=>{
                                active(199);
                                ;});

$(`#slot200`).click(()=>{
                                active(200);
                                ;});

Czy istnieje prostszy zapis eventu, aby dla danych divow wywolywać funkcję z parametrem tym samym co ID slotu? Bo obecne ~600 linijek nie wyglądają obiecująco + chce mieć możliwość dodawania i kasowania slotów w kodzie, dlatego powyższy zapis jest uciążliwy

 

funkcja active sprawdza jaki item znajduje się w danym miejscu i wykonuje jego metode (itemy to obiekty)

komentarz 6 sierpnia 2018 przez kenjiro244 Dyskutant (8,600 p.)
Jak kolega napisał możesz użyć event delegation ale następnym razem w przypadku kiedy masz 200 takich samych prawie linijek prawie zawsze jest sposób w programowaniu aby to obejść. Tutaj można nawet użyć pętli for która doda funkcje do kolejnych slotów.

2 odpowiedzi

+1 głos
odpowiedź 6 sierpnia 2018 przez Tomek Sochacki Ekspert (227,510 p.)
wybrane 7 sierpnia 2018 przez MrxCI
 
Najlepsza

Robisz nasłuchiwanie na event kliknięcia dla rodzica i potem analizujesz element, który faktycznie został kliknięty:

const parent = document.getElementById('parent-id');
parent.addEventListener('click', (e) => {
  const element = e.target;
  if(element.id.startsWith('slot')) {
    // Kliknięto w element o id zawierającym w sobie 'slot'
    const number = +element.id.slice(4);
    active(number);
  }
});

ewentualnie zamiast String.prototype.startsWith może być includes, regexp itp.

+1 głos
odpowiedź 6 sierpnia 2018 przez kubaapk Nałogowiec (44,270 p.)
Poczytaj o event delegation.

Podobne pytania

0 głosów
1 odpowiedź 141 wizyt
pytanie zadane 19 czerwca 2023 w JavaScript przez pj-1024 Użytkownik (670 p.)
0 głosów
2 odpowiedzi 244 wizyt
+2 głosów
1 odpowiedź 417 wizyt
pytanie zadane 1 maja 2016 w JavaScript przez Ivan Maniak (60,650 p.)

92,453 zapytań

141,262 odpowiedzi

319,088 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...