Problem z js/css, proste pytanie.

pytanie zadane 8 października 2020 w JavaScript przez niezalogowany
zamknięte 8 października 2020

Cześć, mam na stronie 3 divy z tą samą klasą z czego pierwszy ma dodatkowo klasę active.

Chciałbym, aby po kliknięciu w drugi (lub trzeci) div klasa active znikała z diva na którym jest i dodawała się do klikniętego diva. Mam problem z tym, że querySelector wyszukuje tylko pierwszy pasujący element do klasy.

Proszę o pomoc!

komentarz zamknięcia: Problem rozwiązany

2 odpowiedzi

odpowiedź 8 października 2020 przez ScriptyChris Mędrzec (190,190 p.)
wybrane 8 października 2020

Najlepsza

Mam problem z tym, że querySelector wyszukuje tylko pierwszy pasujący element do klasy.

Bo querySelector znajduje właśnie tylko pierwszy element, który odpowiada selektorowi przekazanemu w parametrze. Jeśli chcesz znaleźć inny element, to doprecyzuj selektor użyciem :nth-of-type lub :nth-child, albo użyj querySelectorAll.

Jeśli problemem jest coś innego, to pokaż kod, który do tej pory napisałeś.

komentarz 8 października 2020 przez niezalogowany

const box = document.querySelector('.box');
            const boxes = document.querySelectorAll('.box');

            box.addEventListener('click', function () {
                boxes.classList.remove('box-active');
                this.classList.add('box-active');
            })

Stworzyłem coś takiego i nie działa.

komentarz 8 października 2020 przez ScriptyChris Mędrzec (190,190 p.)

Bo querySelectorAll zwraca listę elementów. Żeby operować na nich, musisz odnosić się do konkretnego po indeksie, np. w pętli.

komentarz 8 października 2020 przez niezalogowany

Jak wyglądałaby pętla, w przypadku gdybym chciał zaznaczyć każdy element?

komentarz 8 października 2020 przez VBService Ekspert (254,320 p.)
edycja 9 października 2020 przez VBService

<style>
body {
 background-color: white; 
}
div {
  font: 1.1em monospace;
  width: 20vw;
  cursor: pointer;
}
div:hover {
 background-color: gray;  
}
.active {
  background-color: black;
  color: green;
}
</style>

<body>
<div class="ta-sama-klasa">div 1</div>
<div class="ta-sama-klasa">div 2</div>
<div class="ta-sama-klasa">div 3</div>
</body>

<script>
const divs = document.querySelectorAll('.ta-sama-klasa');
divs.forEach((div) => {
  div.addEventListener('click', ({target}) => {
    target.classList.add('active');
  })
})
</script>

z odznaczaniem ostatnio zaznaczonego

const divs = document.querySelectorAll('.ta-sama-klasa');
let last_active = null; 

divs.forEach((div) => {
  div.addEventListener('click', ({target}) => {
    if (last_active !== target && last_active != null) {
      last_active.classList.remove('active');
    }
    
    target.classList.add('active');
    last_active = target;
  })
})

komentarz 8 października 2020 przez ScriptyChris Mędrzec (190,190 p.)

Jak wyglądałaby pętla, w przypadku gdybym chciał zaznaczyć każdy element?

Robisz pętlę, czy to for, for..of, albo forEach i na każdej iteracji używasz na elemencie element.classList.add('box-active').

odpowiedź 8 października 2020 przez JakSky Stary wyjadacz (14,770 p.)

Bo tak właśnie działa querySelector, jak chcesz wyszukać kilka elementów to możesz użyć querySelectorAll.

Więcej o tym tu:

https://kursjs.pl/kurs/dom/dom.php

komentarz 8 października 2020 przez niezalogowany

const box = document.querySelector('.box');
            const boxes = document.querySelectorAll('.box');

            box.addEventListener('click', function () {
                boxes.classList.remove('box-active');
                this.classList.add('box-active');
            })

Stworzyłem coś takiego i nie działa.