Einfache Hervorhebung nur eines Elements gleichzeitig Funktion

Ich habe eine ausgewählte (zur Hervorhebung) Klasse, die ich nur für jeweils ein Element hinzufügen möchte, so dass jedes Mal, wenn Sie auf ein neues Element klicken, die ausgewählte Klasse hinzugefügt wird und entfernt die ausgewählte Klasse von jedem zuvor angeklickten Element - egal welche.Einfache Hervorhebung nur eines Elements gleichzeitig Funktion

Ich kann es nur funktionieren, wenn Sie Elemente (Schaltflächen) direkt neben/vor klicken.

Wenn ich auf Button 1 und dann z. B. Button 4 klicke, fügt es einfach Klassen hinzu.

https://jsfiddle.net/vLkjovrv/1/

var myButtons = document.querySelectorAll('.my-button'); 

for (var i = 0; i < myButtons.length; i++) { 

    var button = myButtons[i]; 

    button.addEventListener('click', function(event) { 

    this.classList.toggle("selected"); 
    this.previousElementSibling.classList.remove("selected"); 
    this.nextElementSibling.classList.remove("selected"); 

}); 

}

Ich bin mir bewusst, warum die oben nicht funktioniert, ich es direkt sagen, nur Adresse des nächsten/vorherigen, ich habe mit jedoch versucht, if/else classlist enthält! Dieses. classList.contains, e.currentTarget in verschiedenen Kombinationen, aber ich kann es nicht funktionieren lassen.

Ich glaube, ich bin für etwas, wie:

if (alle myButtons.classList.contains ("selected"))
entfernen
sonst
Add ausgewählt

I hab stundenlang nach einer vanilla JS Lösung gesucht, aber ich kann nur jQuery finden - ich möchte einfach JavaScript lernen.

Kann mir jemand hier ein paar Hinweise geben? Würde es sehr schätzen!

Quelle

2016-06-10 Capax

Wow Ich habe bereits mehrere große Antworten verwenden können, ich wünschte, ich wüsste, wie was man ist „beste“ zu beurteilen. – Capax

@ DavidWickström Lösung ist nicht die beste, denke ich. –

Hier dieses cicle einfügen ist ein weiterer Weg, um dieses Problem umzugehen. Zuerst kümmert sich die innere forEach-Schleife darum, die "ausgewählte" Klasse von allen Schaltflächen zu entfernen, und dann wird die Klasse zur angeklickten Schaltfläche hinzugefügt.

Array.prototype.forEach.call(buttons, function(b) { 
    b.addEventListener('click', function(e) { 
    Array.prototype.forEach.call(buttons, function(b) { 
     b.classList.remove('selected') 
    }) 
    b.classList.toggle('selected') 
    }) 
})

Quelle

2016-06-10 08:33:28

Vielen Dank, wow, es gibt viele Möglichkeiten, dieses zu lösen, es scheint, ich muss einen Blick auf forEach.call – Capax

Sie sind herzlich willkommen. Die Verwendung von forEach anstelle einer regulären For-Schleife ist nur eine Frage der Präferenz. Der Hauptpunkt meines Vorschlags ist, dass Sie eine Schleife auslösen, die zuerst alle Klassen entfernt, bevor Sie sie auf die angeklickte Schaltfläche anwenden. –

Ich mag diesen Ansatz, und ich habe etwas Neues gelernt, danke Mann! – Capax

Ich habe ein bisschen Ihren Code geändert. Sie finden hier das Update https://jsfiddle.net/giuseppe_straziota/s6s0yb2k/

habe ich

for (var i = 0; i < myButtons.length; i++) { 
         var button2 = myButtons[i]; 
       button2.classList.remove("selected"); 
     }

Quelle

2016-06-10 08:21:34

Ein weiterer großer, danke! Dieser besondere geht unter die Kategorie der verschachtelten Schleifen, richtig? Ich versuche, von den verschiedenen Lösungen zu lernen, die ich habe :-) – Capax

Ja, ist es. Obwohl, es ist nicht die elegantere :) –

Nun, Sie

document.querySelectorAll(".selected")

(function() { 
 

 
    var myButtons = document.querySelectorAll('.my-button'); 
 

 
    for (var i = 0; i < myButtons.length; i++) { 
 

 
    var button = myButtons[i]; 
 

 
    button.addEventListener('click', function(event) { 
 
     var x = document.querySelectorAll(".selected"); 
 
     if(x.length) { 
 
     \t x[0].classList.remove('selected'); 
 
     } 
 
     this.classList.toggle("selected"); 
 
     
 

 
    }); 
 
    } 
 
})();

.selected { 
 
    background: darkred; 
 
}

<html> 
 

 
<head> 
 
    <meta charset="UTF-8" /> 
 
    <title>Document</title> 
 
</head> 
 

 
<body> 
 

 

 
    <div class="my-button">Button 1</div> 
 

 
    <div class="my-button">Button 2</div> 
 

 

 
    <div class="my-button">Button 3</div> 
 
    <div class="my-button">Button 4</div> 
 

 
    <div class="my-button">Button 5</div> 
 
    <div class="my-button">Button 6</div> 
 

 

 
</body> 
 

 
</html>

Quelle

2016-06-10 08:35:43 XeNo13GrIn

Vielen Dank, das ist eine interessante Frage, wie nennt man diese Art von Schleife?Ich dachte zuerst, dass es eine verschachtelte Schleife war, aber nicht sicher (ich bin begierig zu lernen). – Capax

Dieser verwendet keine Schleife. Es ändert nur das erste Element, das die Klasse 'ausgewählt' hat. x [0] .classList.remove ('ausgewählt'); – XeNo13GrIn

Einfache Hervorhebung nur eines Elements gleichzeitig Funktion

Antwort

Verwandte Themen