0

このボタンを取得して、onClick各li内の非表示のdivを表示しようとしています。これは、絶対位置でpostdivの上に表示されます。問題は、クリックすると、すべてのliのすべての非表示のdivが表示されることです。私はwordpress+buddypressを使用しているので、各liのIDには一意のIDがあります

<li id="activity-<?php bp_activity_id(); ?>" class="activity" >

  <div id="post"></div>

  <div class="action">
   //my pop in stuff
  </div>

  <div id="post-actions-bar">   
    <button id="show">show</button>
  </div>

</li>

これが私がうまくいくと思った私のjqueryです。注：.on()liが動的に追加されるため、使用しています。

$(document).on(  'click' , '.activity button#show' , function() {
   $('.action').show();
});

ある意味では機能し.action div'sますが、画面上のすべてのliのすべてが表示されます。クリックされた、そのliのボタンの1つだけを表示したいと思います。使ってみましたが動作し.each()ません。私は何か間違ったことをしている（明らかに笑）

何か案は？

4

5 に答える 5

3

イベントハンドラー内では、$(this)クリックされた1つのボタンを参照します。したがって、実行する必要があるのは、DOMツリーから開始し$(this)てトラバースし、.action表示したいツリーに到達することです。

これはそれを行う1つの方法であり、私が望ましいと思います。

$(document).on('click' , '.activity button' , function() {
   $(this).closest(".activity").find(".action").show();
});

余談ですが、HTMLはid、複数の要素に同じ値を使用していることを意味します。これは違法であり、修正する必要があります。問題が発生するのは時間の問題です。classほとんどの場合、同じ要素ではなく共有要素を要素に割り当てて操作するのは問題ありませんid。

于 2012-09-07T10:58:57.833 に答える
1

$(this).closest('.activity').find('.action')の代わりに使用する必要があります$('.action')。

この理由は非常に単純です。使用する場合、イベントとはまったく関係のない$('.action')セレクターに一致するすべての要素を取得するだけです。.action

于 2012-09-07T10:59:04.223 に答える
1

クリックイベントをキャッチするには、ドキュメントの代わりにulを使用します

$('ul#parentofyouractivitylis').on('click', '.activity button', function(){
    $(this).closest(".activity").find(".action").show();
});
于 2012-09-07T11:00:37.090 に答える
1

同じメソッドから、または同じメソッドを使用して.action到達できないため、単一のバインドでそれらを実行することはできません。あなたはこのようなことをすることができます：.activitybutton#show

$(document).on('click', '.activity', function() {
    $(this).find(".action").show();
});

$(document).on('click', '#show', function() {
    $(this).closest(".action").show();
});​
于 2012-09-07T11:04:20.397 に答える
0

これがあなたのためのフィドルです：

// html
<li>
    <div>Loading 1...</div>
</li>
<li>    
    <div>Loading 2...</div>
</li>​

// css
div
{
    display:none;
}​

// js
$("li").click(function(){

   // hide any showing ones
   $("li > div").hide(); 

   $(this).find("> div").show();

});
于 2012-09-07T11:00:38.573 に答える