Supprimer la classe surclic quoi que ce soit d'autre

Question

Cela peut sembler une question très simple, mais j'ai beaucoup de mal à essayer de le faire fonctionner.

J'ai une série d'éléments répartis sur différentes parties d'une page.

<span class="click-element"><span> 
--- 
<span class="click-element"><span> 
-- 
<span class="click-element"><span> 

Je veux passer une classe (« active ») on/off sur chacun d'eux quand ils sont cliqués individuellement, cela devrait également supprimer la classe de tous les autres.

Pour ce faire, ma fonction ressemble à ceci:

var targets = document.querySelectorAll('.click-element'); 

    for (i = 0; i < targets.length; i++) { 
     targets[i].addEventListener('click', function() { 
      var clicked = this; 
      if (this.classList.contains("active")) { 
       [].forEach.call(targets, function (a) {a.classList['remove']('active');}); 
      } 
      else { 
       [].forEach.call(targets, function (a) {a.classList[a == clicked ? 'add' : 'remove']('active');}); 
      } 

     }); 
    } 

Mais ce que je suis en train de faire, est alors enlever la classe quand tout le reste est cliqué dans le document:

document.addEventListener('click', function() { 
    document.querySelector('.click-element.active').classList.remove("active"); 
}); 

Cependant, le problème que j'ai est que le deuxième événement semble juste remplacer le premier. Comment puis-je réparer cela? Ou y a-t-il une approche plus propre pour faire ce que je veux?

Pas jQuery grâce

Answer 1

essayer de cancle l'événement bouillonnant comme celui-ci:

for (i = 0; i < targets.length; i++) { 
    targets[i].addEventListener('click', function(e) { 
     var clicked = this; 
     if (this.classList.contains("active")) { 
      [].forEach.call(targets, function(a) { 
       a.classList['remove']('active'); 
      }); 
     } 
     else { 
      [].forEach.call(targets, function(a) { 
       a.classList[a == clicked ? 'add' : 'remove']('active'); 
      }); 
     } 
     e.stopPropagation(); 
    }); 
} 

clés :

cibles [i] .addEventListener (clic, la fonction (e) {... e.stopPropagation(); ...

Answer 2

essayer les bibliothèques jQuery il sera plus facile

$("span").removeClass("yourClass"); 

http://api.jquery.com/removeclass/

Answer 3

Essayez ceci:

var targets = document.querySelectorAll('.click-element'); 
var activeElement; // this should be some global variable 

for (i = 0; i < targets.length; i++) { 
    targets[i].addEventListener('click', function() { 

     if(activeElement){ 
      activeElement.classList['remove']('active'); 
     } 
     var clicked = this; 
     activeElement = this; 
     if (this.classList.contains("active")) { 
      [].forEach.call(targets, function (a) {a.classList['remove']('active');}); 
     } 
     else { 
      [].forEach.call(targets, function (a) {a.classList[a == clicked ? 'add' : 'remove']('active');}); 
     } 

    }); 
} 

Answer 4

Je pense que la meilleure solution sera d'utiliser bullage d'événement. Si vous avez un conteneur commun:

document.getElementById('#containerId').addEventListener('click', function(evt){ 
    var element = evt.target; 
    if(element.classList.contains('click-element'){ 
     //toggle active 
     element.classList[element.classList.contains('active') ? 'add' : 'remove']('active'); 
    } else{ 
     //remove the active from all elements 
     document.querySelectorAll('.click-element.active').forEach(
      function (clickElement, index) {clickElement.classList[remove]('active')} 
     ); 
    } 
}); 

Dans votre cas, vous ne disposez pas d'éléments de l'enfant dans les travées, mais si vous aviez vous devez vérifier si l'élément cliquée est un descendant de la travée.