1
votes

jQuery Chaque basculement de classe de fonction

Je dois supprimer une classe pour tous les éléments de chaque fonction ().

En ce moment, lorsque je clique sur un élément .btn, il y ajoute la classe "sélectionnée", cliquez à nouveau sur .btn cela supprime cette "class.

Mais lorsque je clique sur un autre élément .btn, cela devrait supprimer la classe" selected "des éléments .btn précédents.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="lorem" class="btn">Lorem</div>
<div id="ipsum" class="btn">Ipsum</div>
<div id="dolor" class="btn">Doloe</div>
<div id="Set" class="btn">Set</div>

.selected { background-color:red }

$('.btn').each(function() {
  $(this).click(function() {
    if ($(this).hasClass("selected")) {
      $(this).removeClass("selected");
    } else {
      $(this).addClass("selected");
    }
  });
})

javascript jquery html css

0 commentaires

3 Réponses :

0
votes

Pour corriger votre code existant, supprimez toutes les classes de tous les boutons dans le else:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="lorem" class="btn">Lorem</div>
<div id="ipsum" class="btn">Ipsum</div>
<div id="dolor" class="btn">Doloe</div>
<div id="Set" class="btn">Set</div>

.selected {
  background-color: green;
}

$('.btn').each(function() {
  $(this).click(function() {
    if ($(this).hasClass("selected")) {
      $(this).removeClass("selected");
    } else {
      $('.btn').removeClass("selected");
      $(this).addClass("selected");
    }
  });
})

0 commentaires

2
votes

Vous avez un peu compliqué les choses. Premièrement, vous n'avez pas besoin d'une boucle each () car le click () sera appliqué à une collection d'éléments si vous les fournissez dans le sélecteur. Deuxièmement, vous pouvez utiliser toggleClass () sur l'élément sur lequel vous avez cliqué. Ensuite, vous pouvez utiliser removeClass () sur tous les autres éléments .btn pour supprimer la classe. Essayez ceci:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="lorem" class="btn">Lorem</div>
<div id="ipsum" class="btn">Ipsum</div>
<div id="dolor" class="btn">Doloe</div>
<div id="Set" class="btn">Set</div>

.selected {
  color: #C00;
}

var $btns = $('.btn').click(function() {
  $btns.not(this).removeClass('selected');
  $(this).toggleClass("selected");
});

0 commentaires

1
votes

Vous n'avez pas besoin de chacun ni d'autre; toggleClass et remove from siblings fonctionneront

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="lorem" class="btn">Lorem</div>
<div id="ipsum" class="btn">Ipsum</div>
<div id="dolor" class="btn">Doloe</div>
<div id="Set" class="btn">Set</div>

.selected { background-color:red }

$('.btn').on("click",function() {
  $(this).toggleClass("selected");
  $(this).siblings().removeClass("selected");
})

0 commentaires