jquery frères et sœurs comment faire pour supprimer la classe?

J'ai le texte suivant jQuery:

<script type="text/javascript">
$('.showFood').on('click', function () {
    $(this).addClass('selected').siblings().removeClass('selected');
    $('.targetFood').hide();
    $('#food' + $(this).data('target')).show(function() {
        $('#food' + $(this).data('target')).toggle("slide");
    });
});
$('.showFood').first().click();
</script>

Le code HTML suivant:

<ul class="menus-nav">
<li><a href="#menu1" class="showFood" data-target="1">Menu 1</a></li>
<li><a href="#menu2" class="showFood" data-target="2">Menu 2</a></li>
<li><a href="#menu3" class="showFood" data-target="3">Menu 3</a></li>
</ul>
<div id="food1" class="targetFood">
<p>Items from menu 1</p>
</div>

<div id="food2" class="targetFood">
<p>Items from menu 2</p>
</div>

<div id="food3" class="targetFood">
<p>Items from menu 3</p>
</div>

Tout fonctionne bien sauf lorsque vous naviguez dans les menus, il ne supprimera pas la classe sélectionnée, et une fois que vous cliquez sur tous les menus, ils ont tous la classe sélectionnée.

Je n'ai pas une grande expérience en javascript ou jquery, aucune chance que vous les gars pourrait me donner un peu d'aide s'il vous plaît?

Note: le html a été réduit pour la démo but.

Violon

InformationsquelleAutor lesandru | 2013-10-01
  1. 6

    vous pouvez essayer

    $('.showFood').on('click', function () {
$('.showFood').removeClass('selected');//here remove class selected from all showfood
    $(this).addClass('selected');//here apply selected class on clickable showfood
    $('.targetFood').hide();
    $('#food' + $(this).data('target')).show(function() {
        $('#food' + $(this).data('target')).toggle("slide");
    });
});
    • merci beaucoup les gars, fonctionne comme un charme. @rituraj_ratan, je vais accepter votre réponse que vous avez été le premier, mais toutes les solutions de vous les gars ont très bien fonctionné, j'ai donné un coup de pouce. Merci encore 🙂
    InformationsquelleAutor Rituraj ratan
  2. 10

    Cette ligne de code pourrait être votre problème:

    $(this).addClass('selected').siblings().removeClass('selected');

    Vous souhaiterez probablement supprimer les classes d'abord, puis l'ajouter à l'élément sélectionné:

    $('.selected').removeClass('selected'); //remove all current selections
$(this).addClass('selected')            //select this element
    InformationsquelleAutor naloxx
  3. 1

    si vous avez jQuery 1.7+ vous devriez probablement

    Changement:

    $('.showFood').on('click', function () {
    //YOUR CODES HERE
})

    À

    $(document).on('click', '.showFood', function () {
    //YOUR CODES HERE
})
    • merci pour ça 😉
    InformationsquelleAutor Subedi Kishor
  4. 1

    Utilisation

    $('.showFood').on('click', function () {
$('.showFood').removeClass('selected'); //remove selected class from all elements with class showFood
    $(this).addClass('selected')
    $('.targetFood').hide();
    $('#food' + $(this).data('target')).show(function() {
        $('#food' + $(this).data('target')).toggle("slide");
    });
});
    InformationsquelleAutor Tushar Gupta - curioustushar
  5. 0

    Utiliser un not plutôt que siblings.

    $(this).addClass('selected');
$(".showFood").not(this).removeClass('selected');

    Vous pouvez également utiliser closest

    $(this)
   .addClass('selected').closest('ul')
   .find('a').not(this).removeClass('selected');
    InformationsquelleAutor bhb