jquery兄弟姐妹如何删除类?

时间:2013-10-01 10:01:11

标签: javascript jquery siblings

我有以下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>

以下HTML:

<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>

一切正常,除非您浏览菜单时不会删除所选的类,一旦您单击所有菜单,它们都会选择该类。

我在javascript或jquery方面没有很好的经验,你们中的某些人有可能给我一些帮助吗?

注意:html已经减少用于演示目的。

Fiddle

5 个答案:

答案 0 :(得分:10)

这行代码可能是您的问题:

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

您可能希望先删除这些类,然后将其添加到所选元素中:

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

答案 1 :(得分:6)

你可以尝试

$('.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");
    });
});

答案 2 :(得分:1)

如果你有 jQuery 1.7 + ,你应该

变化:

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

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

答案 3 :(得分:1)

使用

$('.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");
    });
});

答案 4 :(得分:0)

使用not而不是siblings

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

您也可以使用closest

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