J'ai plusieurs instances sur les pilules et j'essaie d'ajouter une classe à celle qui a été cliqué et seulement à celle-là.

Voici un exemple:

Première instance

<ul class="nav nav-pills">
  <li><a data-toggle="tab" href="#contentone" class="active" onclick="toggleActive($event)">One</a></li>
  <li><a data-toggle="tab" href="#contenttwo" onclick="toggleActive($event)">Two</a></li>
</ul>

Instance Deux

<ul class="nav nav-pills">
  <li><a data-toggle="tab" href="#contentone" class="active" onclick="toggleActive($event)">One</a></li>
  <li><a data-toggle="tab" href="#contenttwo" onclick="toggleActive($event)">Two</a></li>
</ul>

J'ai cette fonction:

toggleActive(this) {
    $(this).addClass('active');
}

En gros ce qui se passe c'est que ce que je clique sur l'instance du second (par exemple), c'est changer de pilule dans le premier.

J'en ai besoin juste pour affecter l'élément cliqué et pas l'autre.

Comment puis-je faire ceci?

0
user11185486 12 mars 2019 à 14:18

2 réponses

Meilleure réponse

À moins que vous ne l'ayez défini quelque part au niveau global, $event sera undefined. Même si vous l'avez défini, il ne contiendra aucune information utile sur l'événement déclenché comme l'attend votre code, donc $(this) n'est pas ce que vous attendez.

Pour résoudre ce problème et améliorer le code, arrêtez d'utiliser entièrement les attributs d'événement on* et attachez vos gestionnaires d'événements de manière discrète. Comme vous utilisez déjà jQuery, voici comment procéder :

$('.nav-pills li a').click(function() {
  $(this).toggleClass('active'); // note toggleClass here, to allow selection/deselection
});
.active {
  background-color: #C00;
  color: #FFF;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="nav nav-pills">
  <li><a data-toggle="tab" href="#contentone" class="active">One</a></li>
  <li><a data-toggle="tab" href="#contenttwo">Two</a></li>
</ul>

<ul class="nav nav-pills">
  <li><a data-toggle="tab" href="#contentone" class="active">One</a></li>
  <li><a data-toggle="tab" href="#contenttwo">Two</a></li>
</ul>
3
Rory McCrossan 12 mars 2019 à 11:25

Si vous souhaitez utiliser la fonction toggleActive()

   $(function () {
        toggleActive = function (e) {
            $("a").removeClass('active')
            $(e).addClass('active');
        };
    });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="nav nav-pills">
    <li><a data-toggle="tab" href="#contentone" class="active" onclick="toggleActive(this)">One</a></li>
    <li><a data-toggle="tab" href="#contenttwo" onclick="toggleActive(this)">Two</a></li>
</ul>

Vous pouvez d'abord supprimer toute la classe active, puis ajouter la classe active à l'élément cliqué

0
pedram shabani 12 mars 2019 à 12:16