2

こんにちは私は助けを得ました、そして最終的に私はうまく機能するjqueryshow/hide関数を手に入れました。しかし、コメントグループがいくつかある場合は、それを機能させるために1日を費やして次のステップを実行します。

ここのコード

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

作業デモ 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();
    });
});
​
于 2012-07-15T07:50:41.783 に答える
1

タグに正しいテキストを表示させたい場合は、次のコードを使用してください。

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

    });
});

（4つのリンクに1つの変数（toogle）を使用できないため、xdazzの回答を少し変更しました。）デモ：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 に答える