1

私はajaxリクエストを介してロードされた動的コンテンツを含むブログを開発しており、記事の「コメント投稿」フォームをボタンで非表示/表示しようとしています:

<div id="post">
...
  <ol id="update" class="timeline">
    <!-- comments here -->
  </ol>
  <button class="mybutton Bhome">Commenta</button><!-- hide/show button -->
  <div class="mycomment"><!-- div to hide/show -->
    <form action="#" method="post">
      Nome:
      <input type="text" size="12" id="name" /><br />
      Email:
      <input type="text" size="12" id="email" /><br />
      <textarea rows="10" cols="50" class="mytext" id="commentArea"></textarea><br />
      <input type="submit" class="Bhome" value=" Post " />
    </form>
  </div><!-- mycomment --> 
</div><!-- post -->

このjqueryコードはうまく機能しますが、すべての投稿に影響を与えます...

$("div").on("click", ".mybutton", function(e){ 
  $(".mycomment").slideToggle("slow");
  e.stopPropagation();
});

クリックした非表示/表示ボタンだけが関連記事に影響を与えるようにしたいのですが、私のページには複数の記事があり、.mybuttonクラスのボタンはすべての記事のすべてのコメントフォームを非表示または表示します.

4

1 に答える 1

2

.mybuttonボタンの後に非表示にするdivが常にある場合は、次のように押されているボタン.mycommentの次の兄弟を見つけるだけです。.mycomment

$("div").on("click", ".mybutton", function(e){ 
    $(this).next(".mycomment").slideToggle("slow");
    e.stopPropagation();
});

clicked の兄弟であるnext()次の要素を見つけるために method を使用していることに注意してください。.mycomment.mybutton

于 2012-10-17T23:00:06.353 に答える