Question

HTML：

<div class="container">
  <ul>
    <li class="item" id="id_1">
      <h2>header</h2>
      <div class="c_image">
        <img/>
      </div>
    </li>
  </ul>
</div>

图像上的Click事件必须触发相关h2上的单击事件。 html会自动呈现。

JS：

$(".container .item .c_image img").each(function(){
  $(this).click(function(){
    //console.log($(this).parent("li.item"));
    $(this).closest("h2")[0].click();
  });
});

这种情况的最佳解决方案是什么，我试过最接近，但它没有触发h2点击事件。

这很好用：

$('#id_1 .c_image img').click(function(){
  $('li#id_1 h2')[0].click();
});

Answer 1

closest('h2')在此不起作用，因为h2是img元素的父级的兄弟。您需要获得最接近的li，然后find() h2：

$(".container .item .c_image img").click(function(){
    $(this).closest('li').find("h2").click();
});

请注意，您无需迭代img元素，并且如果您将事件附加到li而不是h2，则可以避免使用此代码然后，事件会从img和h2冒出来。

Answer 2

h2元素是点击图像父级的先前兄弟。因此，您可以使用.parent()和.prev()选择器

此外，您不需要单独迭代元素以为它们附加相同的事件。您只需将事件绑定到返回的图像对象即可。像这样：

$(".container .item .c_image img").click(function(){
   $(this).parent().prev().click();
});

Answer 3

引用“图像上的点击事件必须在相关的h2上触发点击事件。” 假设无论是否点击了img或标题，都必须发生相同的事件。

你不能将点击事件放在li而不是

上

$(".container li").on("click", function(){
    var $this = $(this);
    var heading = $this.find('h2').html();
    console.log(heading);
});

如果没有进一步了解原因，

不能比其他人更好地提出建议吗？

jQuery next，parent，nearest

3 个答案: