querySelectorAll dodaje klasy do wszystkich elementów zamiast do jednego

Question

Mój problem polega na tym, że po zastosowaniu querySelectorAll i pętli for, która ma za zadanie przypisać do klikniętego przyciska klasę, która spowoduje wyświetlenie określonego tekstu w elemencie w zależności od klikniętego przycisku, klasa jest dodawana do wszystkich elementów co powoduje wyświetlenie wszystkich elementów a nie tylko tego klikniętego

Mój kod JS

let artNumber = document.querySelectorAll('.ArtNr');
let artTxt = document.querySelectorAll('.ArtTxt');
let i, j;

for (i = 0; i < artNumber.length; i++) {
    artNumber[i].addEventListener('click', function () {
        for (j = 0; j < artTxt.length; j++) {
            artTxt[j].classList.toggle('show');
        }

    });
}

 

Answer 1

*Przycisku!

Twój event działa tak: po kliknięciu jakiegokolwiek elementu o klasie "ArtNr" odpal pętlę for i dodaj lub usuń (toggle) każdemu elementowi o klasie "ArtTxt" klasę "show".

Musisz usunąć tą pętlę w evencie i nadawać klasę "show" tylko temu elementowi, który został kliknięty. Nie wiem, jak sobie te elementy pozagnieżdżałeś, ale wydaje mi się, że wystarczy użyć "this" lub wyszukać w klikniętym "ArtNr" odpowiadający mu "ArtTxt"

Comments

Kombinowałem i nadal nie wiem jak mam zrobić aby to działało. Jak chcesz zobaczyć jak wygląda mój projekt to tu jest link do niego  https://github.com/matir85/Prawniczek

Tylko tam jest poprzednia wersja pliku script, gdzie nie było querySelectorAll tylko sam querySelector

---

        let artNumber = document.querySelectorAll('.ArtNr');

        for (var i = 0; i < artNumber.length; i++) {
            artNumber[i].addEventListener('click', function () {
                this.nextElementSibling.classList.toggle('show');
            });
        }

Możesz np. zrobić tak, chociaż rozwiązanie nie jest idealne. Łapię pierwszy napotkany element występujący po aktualne klikniętym i zmieniam mu klasę. Możesz się teraz pobawić i zmodyfikować kod.

---

Dzięki. Dopiero się uczę a raczej kończę HTML i CSS a JS jeszcze przede mną. Dlatego nie znałem jeszcze takiej metody jak nextElementSibling. Jeszcze raz dzięki za pomoc.