Question

我试图让这个按钮在每个li中显示一个隐藏的div onClick，它将以绝对定位显示在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();
});

从某种意义上说它确实有用，但它会在屏幕上显示每个li的所有.action div's，我只想显示点击该li按钮的那个。{我尝试使用.each()，但它不起作用。我错了（明显大声笑）

有什么想法吗？

Answer 1

在事件处理程序$(this)内指的是单击的一个按钮。所以你需要做的是从$(this)和traverse the DOM tree开始，到达你想要展示的那个.action。

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

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

另外，您的HTML意味着您对多个元素使用相同的id值。这是非法的，应该修复 - 它只会引起麻烦只是时间问题。大部分时间都可以将共享的class分配给您的元素而不是相同的id并使用它。

Answer 2

您需要使用$(this).closest('.activity').find('.action')代替$('.action')。

原因很简单 - 当您使用$('.action')时，您只需检索与选择器.action匹配的所有元素，这些元素与事件完全无关。

Answer 3

我使用ul代替文档来捕获click事件

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

Answer 4

由于无法使用相同的方法从.action或.activity访问button#show，因此无法使用单个绑定执行此操作。你可以这样做：

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

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

Answer 5

Here对你来说是个小提琴：

// 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();

});

如何为每个li获取点击事件，而不是全部

5 个答案: