element klasse hinzufügen , andere Elemente Klassen sollen weg

lahras04 · 27. Juli 2020

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

JS:

Spoiler anzeigen

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

basti1012 · 27. Juli 2020

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

element klasse hinzufügen , andere Elemente Klassen sollen weg

Jetzt mitmachen!

Teilen