Question

嗨，我得到了帮助，最终我得到了jquery show / hide功能，效果很好。但是，当有几个评论组时，我花了一整天的时间来完成下一步。

这里的代码

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();
    });
});

Answer 2

如果您希望a标签显示正确的文字 - 请使用以下代码：

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

    });
});

（我接受了xdazz的回答并稍微改了一下，因为你不能使用1个变量（toogle）来获得4个链接。）演示：http://jsfiddle.net/jAMGE/

Answer 3

试试这个：

var toggle = false;
$(function() {
    $(document).on('click', 'a.comments', function(e) {
        e.preventDefault();
        var $this = $(this);
        // $this.next().next() is the div after the link.
        $this.next().next().toggle(1000,function() {
            if(!toggle) {
                $this.text('Hide Comments');
                toggle = !toggle;
            }else {
                $this.text('Show Comments');
                toggle = !toggle;
            }
        });
    });
});

的 The DEMO 的

如何独立调用show / hide功能

3 个答案: