使用 jQuery 切换类
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8295534/
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
Toggle class with jQuery
提问by user1069269
I would need to hide a div when user clicks a link.
当用户单击链接时，我需要隐藏 div。
The html is something like this:
html是这样的：
<div class="item">
<div class="entry">
Lorem ipsum
</div>
<a href="#" class="commentsToggle">Show/hide comments</a>
<div class="comments hidden">
This comments div I want show/hide
</div>
</div>
<div class="item">
<div class="entry">
Lorem ipsum
</div>
<a href="#" class="commentsToggle">Show/hide comments</a>
<div class="comments hidden">
This comments div I want show/hide
</div>
</div>
....there's multiple items after this
As a default the comments are hidden (hence the class hidden there). Now if user clicks the Show/hide comments link it should show or hide comments for that specific item, depending are they visible or not. Now the question is do I need some id's to control js to hook only to that one specicif items ocmments and can I do it witouh id?
默认情况下，注释是隐藏的（因此类隐藏在那里）。现在，如果用户单击“显示/隐藏评论”链接，它应该显示或隐藏该特定项目的评论，具体取决于它们是否可见。现在的问题是我是否需要一些 id 来控制 js 只挂钩到那个特定的项目 ocmments，我可以用 id 来做吗？
The js is something like atm:
js 类似于 atm：
$('.item .commentsToggle').click(function(){
elem = $(this).parents('.item');
$(elem).find('.comments').each(function() {
$(this).toggleClass('hidden');
});
});
If there's only one item that works but if multiple it breaks up :/
如果只有一项有效，但如果有多个则分解：/
This is pretty simple.. I just dont get it into my head how to do it actually :D
这很简单..我只是不知道该怎么做：D
回答by Zoltan Toth
try this JS:
试试这个JS：
$('.commentsToggle').click(function(){
$(this).siblings(".comments").toggleClass('hidden');
});
回答by Zut
If you keep the current structure of each post, the shortest way to do it is
如果您保持每个帖子的当前结构，那么最短的方法是
$('.item .commentsToggle').click(function(){
$(this).next().toggleClass('hidden');
});
But a more general way is like you're suggesting
但更一般的方式就像你在建议
$('.item .commentsToggle').click(function(){
$(this).closest('.item').find('.comments').toggleClass('hidden');
});
Also note that you should use the .on()function to bind events as of jQuery 1.7, even though older functions still work.
另请注意，.on()从 jQuery 1.7 开始，您应该使用该函数来绑定事件，即使旧函数仍然有效。
回答by Ehtesham
I would do it like following
我会这样做
$('.item .commentsToggle').click(function(){
$(this).next('.comments').toggleClass('hidden');
});
and if you have more comments you can use the following
如果您有更多评论，可以使用以下内容
$('.item .commentsToggle').click(function(){
$(this).closest('.item').children('.comments').toggleClass('hidden');
});
