0

私は次のようなdiv設定をしています:

<div class="content">
    <button class="show-comments" id="content1"></button>
</div>

<div class="comments-wrapper" id="comment1"></div>

<div class="content">
    <button class="show-comments" id="content2"></button>
</div>

<div class="comments-wrapper" id="comment2"></div>

次のコードがあります。

$('.show-comments').click(function(e){
    e.preventDefault();
    $('.comments-wrapper').slideToggle('slow');
});

ご想像のとおり、コードは機能しますが、クラス単位で機能します。関連する ID の .comments-wrapper のみを開くようにしたいと思います (つまり、コンテンツ 2 ボタンがクリックされた場合に slideToggle コメント 2 を開くなど)。

どうすればいいですか？

4

5 に答える 5

2

あなたはこれを行うことができます：

$(this).parent("div").next('.comments-wrapper').slideToggle('slow');

これにより、関連するクラスの div.comments-wrapperとスライド トグルが見つかります。

そしてフィドル：http://jsfiddle.net/xCJQB/

于 2013-05-24T20:23:19.870 に答える
2 
$('.show-comments').click(function(e){
    e.preventDefault();
    $(this).closest(".content").next('.comments-wrapper').slideToggle('slow');
});

これは、.content要素の直後に.comments-wrapper.

HTML自体を変更できる場合は、ラッパー要素を追加してから、要素の正確な順序への依存を避けるために次のことを行うことをお勧めします。

<div class="wrapper">
    <div class="content">
        <button class="show-comments" id="content1"></button>
    </div>

    <div class="comments-wrapper" id="comment1"></div>
</div>
<div class="wrapper">
    <div class="content">
        <button class="show-comments" id="content2"></button>
    </div>

    <div class="comments-wrapper" id="comment2"></div>
</div>

$(this).closest(".wrapper").find('.comments-wrapper').slideToggle('slow');

このように、.contentと の間に要素を追加.comments-wrapperしても、コードは壊れません。

于 2013-05-24T20:23:37.380 に答える
1 
$('.show-comments').click(function (e) {
    e.preventDefault();
    var num = this.id.match(/\d+$/)[0];
    $("#comment" + num).slideToggle('slow');
});

デモ---> http://jsfiddle.net/7pkyk/1/

于 2013-05-24T20:29:55.433 に答える
0

共通クラスを追加して、ボタンを div に関連付けることができます。

html:

<div class="content">
    <button class="show-comments group1" id="content1"></button>
</div>

<div class="comments-wrapper group1" id="comment1">1</div>

<div class="content">
    <button class="show-comments group2" id="content2"></button>
</div>

<div class="comments-wrapper group2" id="comment2">2</div>

JavaScript:

$('.show-comments').click(function(e){
    var associate = $(this).attr('class').match(/group\d+/).pop();
    var selector = '.comments-wrapper.' + associate;
    e.preventDefault();
    $(selector).slideToggle('slow');
});

http://jsfiddle.net/uMNfJ/

于 2013-05-24T20:56:57.150 に答える
0

このコンテキストを使用

   $(this).closest('.comments').next('.comments-wrapper').slideToggle('slow');

それが直接の要素でない場合は、これも試すことができます

$(this).closest('.comments')
       .nextAll('.comments-wrapper').first().slideToggle('slow');
于 2013-05-24T20:23:43.237 に答える