-3

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

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');
    });

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

4

4 回答 4

3

您可以使用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');
});
于 2013-11-12T20:54:56.770 回答
1

利用.next()

$(this).next('img').toggleClass('expanded');
于 2013-11-12T20:52:46.347 回答
0

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

这是一个示例:(示例

$(document).on('click', '.minMax', function() {
    $(this).toggleClass('expanded');
    $(this).parent().find('img').toggleClass('expanded');
});
于 2013-11-12T21:08:47.593 回答
0

你也可以使用

$(this).parent().find('img').toggleClass('expanded');
于 2013-11-12T20:54:41.230 回答