0

だから私は「コメント」を含む複数の「投稿」を表示するページを持っています。私のコード：

<div class="post">
    This is a post
    <span class="toggleComments">Hide/Show Comments</span>
    <div class="comment">This is a comment</div>
</div>
<div class="post">
    This is another post
    <span class="toggleComments">Hide/Show Comments</span>
    <div class="comment">This is another comment</div>
    <div class="comment">This is a third comment</div>
</div>

これが私の問題ですtoggleComments。コメントdivを「切り替える」クラスが含まれているスパンがあります。私はこれを次の方法で達成しました：

$('.toggleComments').click(function(){
    $('.comment').toggle();
});

リンクをクリックすると、.commentすべてのコメントのdivフォームが非表示/表示されます。すべての投稿のコメントではなく、同じ投稿のコメントが効果を切り替えるようにする方法はありますか？

編集：.toggleComments行で更新

4

5 に答える 5

0

試す：

$('.toggleComments').click(function(){
    $(this).siblings('.comment').toggle();
});

OPの更新されたhtmlを反映するように更新されました。

于 2012-04-11T23:38:58.893 に答える
0

コメントを切り替えたい.toggleCommentsのと同じ内部にあると仮定すると、親が見つかり、その内部で切り替える適切なコメントが見つかります。.post.post

$('.toggleComments').click(function(){
    $(this).closest(".post").find(".comment").toggle();
});

他の回答からわかるよう.commentに、同じ含有div内のオブジェクトを見つけるための多くのアプローチがあります。兄弟を参照するのではなく、この方法で行うことの利点は.post、HTMLのレイアウトが将来多少調整された場合でも、共通の親のどこにでも兄弟が見つかることです。重要なことを妥協しない限り、このタイプのコードを将来のHTMLの調整に対して可能な限り堅牢にすることを好みます。

于 2012-04-11T23:42:51.890 に答える
0

私はあなたがこのようなことをすべきだと思います。こちらのデモ

$('.toggleComments').click(function(){
    var thisParent = $(this).parents('.post');
    thisParent.find('.comment').toggle();
});​
于 2012-04-11T23:43:10.480 に答える
0

デモJSBIN

あなたが次のようなものを持っている場合：

<div class="post">
    This is a post
    <div class="toggleComments">SHOW COMMENTS</div>
    <div class="comment">This is a comment</div>
</div>

...これよりも役立つはずです。

$('.toggleComments').click(function(){
    $(this).nextAll('.comment').toggle();
});
于 2012-04-11T23:43:41.000 に答える
0

これは、すべての「.comment」と「.toggleComments」が同じセレクターであるために発生しています。

これらを一意に変更すると、機能します。すなわち：

<div class="post-1">
    This is a post
    <a class="toggle-1">Toggle Comments</a>
    <div class="comment-1">This is a comment</div>
</div>
<div class="post-2">
    This is a post
    <a class="toggle-2">Toggle Comments</a>
    <div class="comment-2">This is a comment</div>
</div>
$('.toggle-1').click(function(){
    $('.comment-1').toggle();
});
$('.toggle-2').click(function(){
    $('.comment-2').toggle();
});

これがjsfiddlehttp : //jsfiddle.net/Uh9hJ/です

編集：兄弟を使用することははるかに優れています、この男はそれを正しく持っています：https ://stackoverflow.com/a/10115482/864488

于 2012-04-11T23:44:46.077 に答える