web-dev-qa-db-fra.com

jquery toggleClass ne fonctionne pas

j'ai deux liens et je veux changer de classe quand je clique sur un lien.

mes liens sont

<a id="single" class="btn" >
<a id="double" class="btn active">

donc je veux changer de classe de btn to btn active j'ai ce code

$(document).ready(function(){
    $('a.btn').click(function(){
       $(this).removeClass('focus active');
       $(this).removeClass('active');
       $(this).toggleClass("btn active");
   });
});

J'ai essayé avec ce code parce que, dans certains autres, javascript dans mon accpliceation ajoute également ces classes.

ce travail très bien quand c'est comme ci-dessous

<a id="single" class="btn" >
<a id="double" class="btn active">

mais quand mon premier bouton est actif comme ci-dessous

<a id="single" class="btn active" >
<a id="double" class="btn">

cela n'a pas fonctionné mais donnez les cours ci-dessous lorsque vous cliquez deux fois

<a id="single" class="btn active" >
<a id="double" class="active">

c'est étrange car il fonctionne lorsque <a id="double" est actif mais ne fonctionne pas lorsque <a id="single" est actif.

tout ce que je veux, c’est quand je clique sur un lien, 1. supprime toutes les classes de l’ancien lien et donne l’ancienne classe de liens "btn" 2. supprime toutes les classes du lien cliqué et donne à la classe "btn actif"

comment régler ceci?

javascriptjquerytoggleclass
3
user3412718

Vous avez juste besoin de changer de classe pour le lien sur lequel vous avez cliqué, et avant cela, supprimez les classes active et active pour tous les liens, comme ceci:

$('a.btn').click(function(){
  $("a.btn").removeClass("active focus");
  $(this).toggleClass("active");
});
a.active {
  color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="single" class="btn active">single</a>
<a id="double" class="btn">double</a>
7
xxxmatko

Basculement basique

Le code suivant bascule la classe active sur vos boutons, ce qui signifie qu’elle l’ajoute quand elle n’y est pas et qu’elle le supprime quand elle est là:

$(document).ready(function(){
    $('a.btn').click(function(){
       $(this).toggleClass("active");
   });
});

Démo

$(document).ready(function(){
    $('a.btn').click(function(){
       $(this).toggleClass("active");
   });
});
body {
    margin: 0;
}

.btn {
    border: 1px solid black;
    padding: 10px;
    margin: 10px;
    display: inline-block;
    background: #99f;
    cursor: pointer;
}

.btn.active {
    background: #00f;
    color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<a id="single" class="btn">Button 1</a>
<a id="double" class="btn active">Button 2</a>
<a id="trupple" class="btn">Button 3</a>
<a id="quadruple" class="btn">Button 4</a>

Autoriser un seul bouton actif

Si vous voulez avoir exactement un bouton actif à tout moment, vous devez simplement supprimer la classe active de TOUS vos boutons et l'ajouter à celle sur laquelle vous avez cliqué, comme vous pouvez le faire:

$(document).ready(function(){
    $('a.btn').click(function(){
       $('.btn').removeClass("active");
       $(this).addClass("active");
   });
});

Démo

$(document).ready(function(){
    $('a.btn').click(function(){
       $('.btn').removeClass("active");
       $(this).addClass("active");
   });
});
body {
    margin: 0;
}

.btn {
    border: 1px solid black;
    padding: 10px;
    margin: 10px;
    display: inline-block;
    background: #99f;
    cursor: pointer;
}

.btn.active {
    background: #00f;
    color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<a id="single" class="btn">Button 1</a>
<a id="double" class="btn active">Button 2</a>
<a id="tripple" class="btn">Button 3</a>
<a id="quadruple" class="btn">Button 4</a>
3
John Slegers

Votre sélecteur jQuery peut être le problème.

Vous détectez le clic sur toutes les balises d'ancrage avec la classe "btn":

$('a.btn').click(function(){

Mais alors vous supprimez la classe "btn". Comment détecter les futurs clics? Réponse: ils ne le feront pas.

Notez qu'il n'est pas nécessaire de spécifier les deux classes dans la ligne

$(this).toggleClass("btn active");

Il semble que vous ne souhaitiez vraiment que basculer la classe active, alors faites simplement

$(this).toggleClass("active");

Aussi, je trouve le plus utile de spécifier exactement ce que je veux ajouter/supprimer à un moment donné. En d'autres termes, j'essaie uniquement d'utiliser addClass() et removeClass(), plutôt que toggleClass(). Cela nécessite plus de code, mais c'est plus sûr.

2
gibberish

Veuillez changer le code jQuery comme suit:

$(document).ready(function(){
    $('a.btn').click(function(){
        $(this).toggleClass("btn btn active");
   });
});

Cela fonctionne pour moi. J'espère que cela t'aides :)

2
Hardipsinh Jadeja
$("a.btn").on("click", function() {
                        $(this).toggleClass("active");
                        $(this).siblings().toggleClass("active");
                });
1
song wang