0

我试图让这个按钮onClick在每个 li 中显示一个隐藏的 div，它将以绝对定位显示在 post div 上。问题是，在点击时，它会显示所有 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 按钮的那个。我尝试使用.each()，但它不工作。我错了（很明显，哈哈）

有任何想法吗？

4

5 回答 5

3

在事件处理程序$(this)中指的是被单击的一个按钮。所以你需要做的是从 DOM 树开始$(this)并遍历到.action你想要显示的那棵树。

这是一种方法，我觉得更可取：

$(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

I'd use the ul instead of the document to catch the click event

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

您不能使用单个绑定来完成它们，因为.action无法使用相同的方法.activity或button#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

Here is a fiddle for you:

// 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 回答