javascript - 定位最近的元素jquery

Question

我有一个绝对位于图像顶部的打开/关闭按钮。它工作正常，除非我单击以切换它针对所有图像的类

HTML

  <ul>
      <li>
         <span class="minMax"></span>
         <img>
      </li>
      <li>
         <span class="minMax"></span>
         <img>
      </li>
    </ul>

jQuery当前代码

$('.minMax').click(function () {
  $(this).toggleClass('expanded');
  $('img ').toggleClass('expanded');
});

我试过使用.closest()，但它不会工作

   $('.minMax').click(function () {
      $(this).toggleClass('expanded');
      $(this).closest('img').toggleClass('expanded');
    });

关于如何定位跨度分层的图像的任何想法？

Answer 1

您可以使用siblings()功能：

$('.minMax').click(function () {
  $(this).toggleClass('expanded');
  $(this).siblings('img').toggleClass('expanded');
});

你也可以回到你的父母那里找到 img 孩子，imo 是正确和合乎逻辑的方法：

$('.minMax').click(function () {
  $(this).toggleClass('expanded');
  $(this).parent().find('img').toggleClass('expanded');
});

Answer 2

利用.next()

$(this).next('img').toggleClass('expanded');

Answer 3

您还可以使用 on() 考虑事件委托，以防您在列表中添加新项目。

这是一个示例：（示例）

$(document).on('click', '.minMax', function() {
    $(this).toggleClass('expanded');
    $(this).parent().find('img').toggleClass('expanded');
});

Answer 4

你也可以使用

$(this).parent().find('img').toggleClass('expanded');