element klasse hinzufügen , andere Elemente Klassen sollen weg

lahras04

tag,

ich habe 4 boxen. Ich möchte das, wenn man eine Box anklickt, dass ein Box-Shadow erscheint. Sollte man eine andere Box anklicken soll die Klasse bei der alten Box die angeklickt wurde weggehen und beim neuen Element erscheinen.

Wie bekomm ich das hin?

HTML:

Spoiler anzeigen

HTML

<div class="container">
    
   <div class="items">
        <p>Text</p>
   </div>

    <div class="items">
        <p>Text</p>
   </div>

    <div class="items">
        <p>Text</p>
   </div>

    <div class="items">
        <p>Text</p>
   </div>

</div>

Alles anzeigen

JS:

Spoiler anzeigen

JavaScript

var items = document.querySelectorAll('.col-items');
        
        for(const item of items) {
        
            item.addEventListener('click', function() {
                
                addClass(item, 'add_shadow');
                
            });
        
        }

Alles anzeigen

Nicht wundern wegen dieser addClass funktion, hab eine andere Funktion eingebunden damit ich nur addClass/RemoveClass eingeben kann.

basti1012

das sollte mit toggleclass gehen.

Erst alle Boxen mit querySelectorAll holen und dann mit toggleclass arbeiten.

Oder ohne toggleclass m, aber dann mit addclass und removeclass

Theoretisch sollte das reichen

Code

var items = document.querySelectorAll('.container .items');
items.forEach(function(s){
    s.addEventListener('click', function(j) {
        weiter(items);
        s.classList.add('add_shadow');      
    })
});
function weiter(i){
     i.forEach(function(w){
       if( w.classList.contains('add_shadow')){
         w.classList.remove('add_shadow');
       }
     })
}

Alles anzeigen

Jetzt mitmachen!