J'ai trois boutons et chacun a une classe CSS. Au clic de l'un d'eux, je voudrais supprimer la classe et ajouter une nouvelle classe CSS uniquement pour l'élément cliqué. De plus, je dois maintenir enfoncé le bouton sélectionné. J'ai cherché quelques exemples et j'ai trouvé qu'il était possible de faire quelque chose comme ceci:

$(".class").removeClass("choice").addClass("active");

Cela fonctionne pour tous les boutons, mais pas seulement pour un. J'essaye de changer ça en

$(this).removeClass("choice").addClass("active");

Mais cela n'a pas fonctionné.

Je fais un violon pour plus de compréhension: https://jsfiddle.net/90u6b3tj/3/

MODIFIER J'ai besoin du même comportement lorsque j'appuie une deuxième fois

Désolé pour le problème de base.

Merci d'avance

Cordialement

2
Giordano 8 mars 2016 à 14:53

6 réponses

Meilleure réponse

J'ai mis à jour votre jsfiddle pour une solution de travail:

https://jsfiddle.net/90u6b3tj/10/

Voici la partie javascript:

$(function() {
    $("button").click(function(e) {
        e.preventDefault();
        $(this).toggleClass("active");
    });
});
3
Artifex404 8 mars 2016 à 12:08

Vous pouvez utiliser change(this) dans votre balisage button et faire référence à cet élément dans votre fonction change(), comme indiqué dans cette violon.

0
Aer0 8 mars 2016 à 11:59

Vous pouvez utiliser le code suivant à la place.

$(".class").click(function(){
    $(".class").addClass("choice");
    $(".class").removeClass("active");
    $(this).removeClass("choice").addClass("active");
});

Ici, la classe " choix " est supprimée uniquement de la classe cliquée. Pas des autres. La classe " active " est également ajoutée à celle sur laquelle vous avez cliqué.

0
Imesha Sudasingha 8 mars 2016 à 11:58

Comme vous ajoutez vos événements de clic comme ceci: -

<button id="hourly" class="choice" onclick="change()">Orario</button>

Vous pouvez utiliser event.target: -

function change(){
  event.preventDefault();
  $(event.target).removeClass("choice").addClass("active");
}

OU, changez votre événement et passez this: -

<button id="hourly" class="choice" onclick="change(this)">Orario</button>

Afin que vous puissiez faire: -

function change(element){
  event.preventDefault();
  $(element).removeClass("choice").addClass("active");
}

OU mieux encore: -

$('.choice').click(function(e){
    e.preventDefault();
    $(this).removeClass("choice").addClass("active");
});

Et supprimez l'événement de clic en ligne.

1
BenG 8 mars 2016 à 12:00
function change(event){
  event.preventDefault();
  //$(".choice").removeClass("choice").addClass("active");
  $(event.target).removeClass("choice").addClass("active");
}
<div>
  <button id="hourly" class="choice" onclick="change(event)">Orario</button>
</div>

<div>
  <button id="daily" class="choice" onclick="change(event)">Giornaliero</button>
</div>

<div>
  <button id="monthly" class="choice" onclick="change(event)">Mensile</button>
</div>
0
saikumar 8 mars 2016 à 12:00

Devrait-il être possible de sélectionner plusieurs éléments comme actifs? Sinon, vérifiez ceci:

Annotation

<div>
  <button id="hourly" class="choice">Orario</button>
</div>

<div>
  <button id="daily" class="choice">Giornaliero</button>
</div>

<div>
  <button id="monthly" class="choice">Mensile</button>
</div>

CSS

.active { 
    background-color: #A60076;
    color: #FF0000;
}

.choice {
  background-color: #000000;
    color: #FFFFFF;
}

JS

$(document).ready(function() {
  $('button').click(function(e) {
    $("button").addClass('choice').removeClass('active');
    $(this).removeClass('choice').addClass('active');
  });
});

Voici un exemple de violon avec le code ci-dessus qui fonctionne.

-1
drneel 8 mars 2016 à 18:23