jquery兄弟姐妹如何刪除類？

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

來源

2013-10-01 lesandru

你可以嘗試

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

來源

2013-10-01 10:04:38

非常感謝你的傢伙，就像一個魅力。 @rituraj_ratan我會在第一時間接受你的答案，但是你們所有的解決方案都工作得很好，我豎起了大拇指。再次感謝你：） – lesandru

，如果你有的jQuery 1.7+你應該

變化：

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

要

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

來源

2013-10-01 10:03:56

感謝是什麼;） – lesandru

這行代碼可能會被你的問題：

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

你可能想先刪除類，然後將其添加到選定的元素：

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

來源

2013-10-01 10:04:04 naloxx

使用

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

來源

2013-10-01 10:05:29

使用not而不是siblings。

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

您還可以使用closest

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

來源

2013-10-01 10:10:40 bhb

jquery兄弟姐妹如何刪除類？

回答

相關問題