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

getElementsByKlassName dla wielu czlonków klasy

Object Storage Arubacloud
0 głosów
280 wizyt
pytanie zadane 8 lipca 2020 w JavaScript przez KumberTwo Dyskutant (8,270 p.)

Cześć, próbuję zrobić modalboxa pojawiającego się na ekranie po kliknięciu w konkretne komórki tabeli. Te komórki to tak naprawdę dni w kalendarzu, który programuję. Chce, aby zawartość modala była różna zależnie od klikniętego dnia, lecz nie wszystkie dni powinny go w ogóle otwierać. Gdy próbuję zrobić:

var btn = document.getElementsByClassName("wydarzenie");

o później dodaje onclicka do btn to żadna z komórek nie otwiera modala. Gdy dodam [0] na końcu tej linijki to wszystko otwiera się poprawnie, lecz tylko dla pierwszej komórki o klasie wydarzenie. Jak zrobić coś takiego, żeby wszsytkie komórki z tej klasy otwierały modalboxa? Może zrobić jakąś pętlę, która wykona tę linijkę i pododaje na końcu [0], [1], [2], itd.?

komentarz 8 lipca 2020 przez KumberTwo Dyskutant (8,270 p.)

Już sobie jakoś poradziłem, ale może jest jakiś lepszy sposób, to zostawię to pytanie jeszcze otwarte. Moje rozwiązanie:

var btn = new Array(4);
      for(var i = 0; i < 4; i++)
      {
        btn[i] = document.getElementsByClassName("wydarzenie")[i];
        btn[i].onclick = function() {
          modal.style.display = "block";
        }
      }

(Ta czwórka w pętli to tak tymczasowo, bo chciałem sprawdzić czy to w ogóle będzie działać)

5 odpowiedzi

+1 głos
odpowiedź 8 lipca 2020 przez JAKUBW Nałogowiec (33,470 p.)
wybrane 10 lipca 2020 przez KumberTwo
 
Najlepsza
Użyj pętli, która zrobi daną akcję dla wszystkich elementów w liście zwracanej przez getElementsByClassName
komentarz 8 lipca 2020 przez KumberTwo Dyskutant (8,270 p.)
Czy po zrobieniu var btn = document.getElementsByClassName("wydarzenie")
btn jest listą?
komentarz 8 lipca 2020 przez Paweł Nąckiewicz Nałogowiec (48,990 p.)

Można tak powiedzieć, choć tak na prawdę jest kolekcją - https://developer.mozilla.org/en-US/docs/Web/API/HTMLCollection

komentarz 8 lipca 2020 przez JAKUBW Nałogowiec (33,470 p.)
Tak, technicznie jest kolekcją, której zawartość może być modyfikowana, dlatego warto użyć Array.from, żeby mieć pewność, że nie usunie się jakiś element podczas przechodzenia pentlą.
komentarz 8 lipca 2020 przez KumberTwo Dyskutant (8,270 p.)
Mógłbyś podać przykład jak to wykonać? Dopiero zaczynam naukę javascriptu
1
komentarz 8 lipca 2020 przez JAKUBW Nałogowiec (33,470 p.)

Aktualnie masz coś takiego:

var btn = document.getElementsByClassName("wydarzenie")[0];

// twoja akcja, np. ustawienia tła na czerwone
btn.style.background = 'red'; 

To możesz użyć pentli w taki sposób:

for (const element of document.getElementsByClassName("wydarzenie")) {
    // twoja akcja, np. ustawienia tła na czerwone
    element.style.background = 'red'; 
}

Tylko uwaga: Jeżeli jako twoja akcja będziesz usuwał klasę wydarzenie z tego elementu, to ta pentla zacznie omijać pewne elementy. W takim przypadku musisz zastosować coś takiego:

for (const element of Array.from(document.getElementsByClassName("wydarzenie"))) {
    // twoja akcja, np. ustawienia tła na czerwone
    element.style.background = 'red'; 
}


 

+2 głosów
odpowiedź 8 lipca 2020 przez Tomek Sochacki Ekspert (227,510 p.)

nie musisz podpinać listenera pod każdy przycisk, możesz zrobić to inaczej:

<ul id="days">
  <li data-open-modal/>1 otwiera</li>
  <li data-open-modal/>2 otwiera</li>
  <li />3 nie otwiera</li>
  <li data-open-modal/>4 otwiera</li>
</ul>

Dla elementów, które mają otwierać modala dodaję atrybut data-open-modal, i następnie zapinam listener click tylko na parencie:

const days = document.getElementById('days');
days.addEventListener('click', e => {
  if (e.target.dataset.openModal !== undefined) {
    alert(`modal otwarty z pola: ${e.target.textContent}`);
  }
})

i w JS sprawdzam, czy kliknięty element posiada odpowiednie pole openModal nie będące undefined. Ja bym poszedł raczej w tę stronę, wtedy z poziomu templatki ustawiasz sobie latwo jakie pola mają być otwieralne, np. przy ich generowaniu, a listener zapięty na parencie po prostu sprawdza sobie parametry klikniętego pola.

komentarz 8 lipca 2020 przez KumberTwo Dyskutant (8,270 p.)

Wow, dużo się tu dzieje i szczerze mówiąc jako osoba początkująca nie za bardzo wiem o co chodzi. Mógłbyś to wytłumaczyć? Dodam, że modala tworzę według tego schematu: modal box'a    Dzięki smiley

+1 głos
odpowiedź 8 lipca 2020 przez Paweł Nąckiewicz Nałogowiec (48,990 p.)

Metoda getElementsByClassName, zwraca obiekt podobny do tablicy, zawierający wszystkie elementy, które mają przypisaną daną klasę.

Twoja zmienna btn - przechowuje właśnie taką niby tablice (obiekt klasy HTMLCollection), z konkretnymi elementami. Ty właśnie musisz komunikować się z tymi elementami. Możesz zrobić tutaj pętle, która dla Twojej tablicy (w twoim kodzie to jest btn) doda jakieś zdarzenie etc.

komentarz 8 lipca 2020 przez KumberTwo Dyskutant (8,270 p.)
Dzięki, nie wiem jednak, jak iterować się po takiej kolekcji. Mógłbyś podać przykład? Chciałbym też, żeby modal wiedział z jakiej komórki został otwarty. Czy ten sposób mi to umożliwi?
+1 głos
odpowiedź 8 lipca 2020 przez lapa19904 Stary wyjadacz (11,560 p.)
Tak, najlepiej to zrobić pętlą. Żeby chwycić wszystkie:

const btn = document.querySelectorAll('.class');
+1 głos
odpowiedź 8 lipca 2020 przez _Pita_ Stary wyjadacz (11,410 p.)
edycja 8 lipca 2020 przez _Pita_

To dlatego, że btn przechowuje zbiór elementów, a nie jeden konkretny.

Możesz użyć:
 

var btni = btn.length

while(btni <= 0){
//Twój kod
btni--;
}

Powinno zadziałać. Niedawno miałem podobny problem i zadziałało.

komentarz 8 lipca 2020 przez Paweł Nąckiewicz Nałogowiec (48,990 p.)
co to niby robi?
komentarz 8 lipca 2020 przez _Pita_ Stary wyjadacz (11,410 p.)
Pętla, która może wczytywać po kolei wszystkie wartości tych komórek, za pomocą btn[btni]

P.S

W tym przypadku będzie się to działo od tyłu ale bardzo łatwo to naprawić

Edit: To jest właśnie zarys pętli o której wspominasz powyżej
1
komentarz 8 lipca 2020 przez Comandeer Guru (602,560 p.)

Twój kod nie zadziała, bo w JS-ie nie ma pętli While, jest pętla while

komentarz 8 lipca 2020 przez _Pita_ Stary wyjadacz (11,410 p.)
Prawda, autokorektę mam ustawioną na duże litery od nowej linii, nie zauważyłem błędu

Podobne pytania

0 głosów
2 odpowiedzi 125 wizyt
–1 głos
1 odpowiedź 651 wizyt
0 głosów
0 odpowiedzi 533 wizyt

92,687 zapytań

141,598 odpowiedzi

320,087 komentarzy

62,048 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

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!

...