Question

我的页面上有产品图片，每张图片上方都有一个“更多信息”按钮。单击时，图像上有一个覆盖图，其中包含更多信息。 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>

现在，当叠加层可见时，会有另一个按钮显示“少信息”，一旦点击它就会隐藏覆盖图并附加额外信息。这是它的jQuery：

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


});

$j('.product_less_info').on('click', function(event){
event.preventDefault();
$j('.product_more_info').show();
$j('.product_less_info').hide();
});

这有效，但我的问题是它是产品/图像的列表，因此当用户点击“更多信息”并隐藏该div时，它会隐藏所有产品/图像的div，而不仅仅是用户点击的那个上。我尝试使用.next，但没有运气。

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

});

任何想法如何实现这一目标？

Answer 1

最简单的方法是使用.closest(selector)访问共同的祖先 - 在这种情况下它是.products_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结构

Answer 2

试试这个

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

仅在特定div上单击事件

2 个答案: