2

嗨，我得到了帮助，最终我得到了运行良好的 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 脚本的情况下独立管理它们的显示/隐藏？

4

3 回答 3

3
于 2012-07-15T07:50:41.783 回答
1

如果您希望 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/

于 2012-07-15T08:01:30.563 回答
0

尝试这个：

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

演示。

于 2012-07-15T07:46:44.193 回答