[英]jquery siblings how to remove class?
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已经减少用于演示目的。
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
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");
});
});
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
})
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");
});
});
Use a not
rather 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');
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.