javascript jquery兄弟姐妹如何删除类？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19113291/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jquery siblings how to remove class?
提问by lesandru
I have the following 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>
The following HTML:
以下 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>
Everything works fine except when you navigate through the menus it won't remove the selected class and once you click all menus they all have the class selected.
一切正常，除非当您浏览菜单时，它不会删除选定的类，并且一旦您单击所有菜单，它们都会选择该类。
I don't have a great experience in javascript or jquery, any chance some of you guys could give me some help please?
我在 javascript 或 jquery 方面没有很好的经验，你们中的一些人可以给我一些帮助吗？
Note: the html has been reduced for demo purpose.
注意：为了演示目的，html 已被减少。
采纳答案by Rituraj ratan
you can try
你可以试试
$('.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");
});
});
回答by naloxx
This line of code might be your problem:
这行代码可能是你的问题：
$(this).addClass('selected').siblings().removeClass('selected');
You probably want to delete the classes first, then add it to the selected element:
您可能想先删除类，然后将其添加到所选元素中：
$('.selected').removeClass('selected'); // remove all current selections
$(this).addClass('selected') // select this element
回答by Tushar Gupta - curioustushar
Use
利用
$('.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");
});
});
回答by Subedi Kishor
if you have jQuery 1.7+you should probably
如果你有jQuery 1.7+你可能应该
Change:
改变：
$('.showFood').on('click', function () {
//YOUR CODES HERE
})
To
到
$(document).on('click', '.showFood', function () {
//YOUR CODES HERE
})
回答by bhb
Use a notrather than siblings.
使用not而不是siblings。
$(this).addClass('selected');
$(".showFood").not(this).removeClass('selected');
You can also use closest
你也可以使用 closest
$(this)
.addClass('selected').closest('ul')
.find('a').not(this).removeClass('selected');
