Javascript 仅在特定div上单击事件

我有一个页面，上面有产品图片，每个图片上面都有一个“更多信息”按钮。单击后，图像上会覆盖更多信息。 html的外观如下所示：

<div class=“products_overlay overlay_test”>
  <div class=“products_overlay_info”>
    <div class=“product_more_info”>
        <span>More Info</span>
    </div>
  </div>

  <ul class=“hover_text”>
    <li class=“product_less_info”><span>Less Info</span></li>
  </ul>
</div>

这是可行的，但我的问题是，它是一个产品/图像列表，因此当用户单击“更多信息”并隐藏该div时，它会隐藏所有产品/图像的div，而不仅仅是用户单击的产品/图像。 我试过使用

.next

，但运气不好

$j('.product_more_info').on('click', function(){
    $j(this).next('.product_less_info').show();
    $j(this).next('.product_more_info').hide();

});

有什么办法可以做到这一点吗？

试试这个

$j('.product_more_info').on('click', function(){
    $j('.product_less_info', $j(this).parents('.products_overlay')).show();
    $j(this).hide();
});

试试这个

$j('.product_more_info').on('click', function(){
    $j('.product_less_info', $j(this).parents('.products_overlay')).show();
    $j(this).hide();
});

---

最简单的方法是使用

.closest（selector）

-在本例中是

.products\u overlay

$j('.product_more_info').on('click', function(){
    $j(this).closest('.products_overlay').find('.product_less_info').show();
    $j(this).hide();
});

您还可以两次调用

.parent（）

：

$j('.product_more_info').on('click', function(){
    $j(this).parent().parent().find('.product_less_info').show();
    $j(this).hide();
});

---

但是

.closest（selector）

在这种情况下更可靠，因为您可能会在将来稍微更改html结构

最简单的方法是使用

.closest（selector）

-在这种情况下是

.products\u overlay

$j('.product_more_info').on('click', function(){
    $j(this).closest('.products_overlay').find('.product_less_info').show();
    $j(this).hide();
});

您还可以两次调用

.parent（）

：

$j('.product_more_info').on('click', function(){
    $j(this).parent().parent().find('.product_less_info').show();
    $j(this).hide();
});

---

但是

.closest（选择器）

在这种情况下更可靠，因为您可能会在将来稍微更改html结构

您只需要显示和隐藏div，就像您为

产品较少信息

和

产品较多信息

所做的那样。为什么要将较少信息按钮放在常规产品图像构造之外的列表中？一个列表只包含一个条目有多大意义？按照演示的方式，您还应该遇到一个问题，即单击“更多信息”会在所有图像上打开信息层，而不仅仅是在用户单击的图像上，是吗？@connexo我必须这样做，因为页面的布局和列表中不只有一个条目-我只是没有包括剩余的li来缩短代码，因为他们没有必要解释问题，你只需要显示和隐藏div，就像你对

产品信息
所做的那样
product\u more\u info
。为什么要将“less info”按钮放在常规产品图像结构之外的列表中？一个列表只包含一个条目有多大意义？按照演示的方式，您还应该遇到一个问题，即单击“更多信息”会在所有图像上打开信息层，而不仅仅是在用户单击的图像上，是吗？@connexo我必须这样做，因为页面的布局和列表中不只有一个条目-我只是没有包括li的其余部分来缩短代码，因为他们没有必要解释这个问题。这缺少任何关于如何解决给定问题的解释。而且它也不是优化的解决方案，因为
.parents（）
将转到文档根目录，该目录不是neccessary@pwolaq：.parents（）元素按从最近的父元素到外部的顺序返回。看这里我知道它是如何工作的，我只是说你应该使用
最近的
，因为你只想要第一个家长，没有必要获取所有的家长。这缺乏任何关于如何解决给定问题的解释。而且这不是优化的解决方案，因为
。parents（）
将进入文档根目录，但事实并非如此neccessary@pwolaq：.parents（）元素按从最近的父元素到外部的顺序返回。在这里我知道它是如何工作的，我只是说你应该使用
最近的
，因为你只想要第一个父母，没有必要得到所有的父母