如何独立调用显示/隐藏功能 [英] How do I call show/hide function independently

问题描述

我得到了帮助，最终我得到了运行良好的jquery show/hide函数. 但是，当有多个评论组时，我会花一整天的时间进行下一步工作.

Hi I got help and eventually I got jquery show/hide function that work well. But I spend a whole day to do next step by make it work when there are several comment groups.

此处的代码

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相同，因此在单击每个注释组时它们无法独立工作.

There are 4 comment groups but because of the html DOMs are the same then they could not working independently while click each of them.

请问您如何建议在不为每个评论组分配jquery脚本的情况下如何独立管理它们的显示/隐藏情况?

Can you please advise how to deal with this situation manage them show/hide independently without having assigned jquery script per comments group?

推荐答案

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

Working demo http://jsfiddle.net/ZXNWF/ or http://jsfiddle.net/X5ZUU/1/ or with text change: http://jsfiddle.net/Xam9q/

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

然后使用nextAll总是显示:first.

请随时与演示一起玩，希望这对事业有所帮助.

rest feel free to play around with the demo, hope this help for the cause.

代码

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

这篇关于如何独立调用显示/隐藏功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！