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孩子，以正确和合乎逻辑的方式去做：

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

Answer 2

使用.next()

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

Answer 3

您也可以使用

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

Answer 4

如果您在列表中添加新项目，也可以使用on（）考虑事件委派。

以下是一个示例：(Example)

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

定位最接近的元素jquery

4 个答案: