jquery - 如何独立调用显示/隐藏函数

Question

嗨，我得到了帮助，最终我得到了运行良好的 jquery 显示/隐藏功能。但我花了一整天的时间来进行下一步，让其在有多个评论组的情况下发挥作用。

代码在这里

var toggle = false;
$(function() {
    $(document).on('click', 'a.comments', function(e) {
        var $this = $(this);
        $('.toggleComments').toggle(1000,function() {
            if(!toggle) {
                $this.text('Hide Comments');
                toggle = !toggle;
            }else {
                $this.text('Show Comments');
                toggle = !toggle;
            }
        });
        e.preventDefault();
    });
});

<a href="#" class="comments">Show Comments</a><br />
<div class="toggleComments" style="display:none;">This is #comment1 <br />This is #comment2 <br /></div>
<a href="#" class="comments">Show Comments</a><br />
<div class="toggleComments" style="display:none;">This is #comment1 <br />This is #comment2 <br /></div>
<a href="#" class="comments">Show Comments</a><br />
<div class="toggleComments" style="display:none;">This is #comment1 <br />This is #comment2 <br /></div>
<a href="#" class="comments">Show Comments</a><br />
<div class="toggleComments" style="display:none;">This is #comment1 <br />This is #comment2 <br /></div>

有 4 个评论组，但由于 html DOM 相同，因此单击每个评论组时它们无法独立工作。

您能否建议如何处理这种情况，独立管理它们的显示/隐藏，而无需为每个评论组分配 jquery 脚本？

Answer 1

工作演示 http://jsfiddle.net/ZXNWF/ 或 http://jsfiddle.net/X5ZUU/1/或更改文本:http://jsfiddle.net/Xam9q/

API:http://api.jquery.com/nextAll/

然后使用 nextAll 始终显示 :first 一个。

休息一下，随意玩一下演示，希望这对您有所帮助。

代码

var toggle = false;
$(function() {

    $(document).on('click', 'a.comments', function(e) {
         $('.toggleComments').hide();
        var $this = $(this);
        $(this).nextAll('.toggleComments:first').toggle(1000,function() {
            if(!toggle) {
                $this.text('Hide Comments');
                toggle = !toggle;
            }else {
                $this.text('Show Comments');
                toggle = !toggle;
            }
        });
        e.preventDefault();
    });
});
​

或简单

var toggle = false;
$(function() {

    $(document).on('click', 'a.comments', function(e) {
        $('.toggleComments').hide();
        var $this = $(this);
         $('.comments').text('Show Comments');
            $this.text('Hide Comments');
        $(this).nextAll('.toggleComments:first').toggle(1000,function() {    
        });
        e.preventDefault();
    });
});
​