jquery - 需要帮助更改 ul 列表中父图像的 src

Question

我有一个自定义手风琴菜单，每个可扩展 UL (toggle_action) 旁边带有 [+] 链接以扩展其子级 (div_toggle)。对于主动

（正在查看的页面）我正在尝试遍历 DOM 并将任何 plus.gif 图像更改为其父级旁边的 minus.gif

s 因为它们已经扩展了。我已经搜索了一天的大部分时间并且发疯了。以下是我认为肯定会奏效的最新尝试。我没有收到任何错误 - 它只是不起作用。

这是我的 HTML：

    <ul class="topnav">
      <li><h3 class="toggle_action"><img class="img-swap" src="/images/plus.gif"/>Governance</h3>
        <ul class="div_toggle">
          <li><h3><img src="/images/spacer.gif"/><a href="/governance">Governance</a></h3></li>
          <li><h3 class="toggle_action"><img class="img-swap" src="/images/plus.gif"/>Board of Directors</h3>
            <ul class="div_toggle">
              <li><h3><img src="/images/spacer.gif"/><a href="/governance/bod" class="active">Board of Directors</a></h3></li>    
              <li><h3><img src="/images/spacer.gif"/><a href="/governance/bod/min">Minutes</a></h3></li>
            </ul>
          </li>
          <li><img src="/images/spacer.gif"/><a href="/governance/com">Committees</a></h3></li>
        </ul>
      </li>
      <li><h3 class="toggle_action"><img class="img-swap" src="/images/plus.gif"/>About</h3>      
        <ul class="div_toggle">
          <li><h3><img src="/images/spacer.gif"/><a href="/about">About Us</a></h3></li>
          <li><h3><img src="/images/spacer.gif"/><a href="/about/contact">Contact</a></h3></li>
        </ul>
      </li>
   </ul>

和 jQuery：

$('.topnav a.active').parents().attr('src').replace('plus.gif','minus.gif');

我究竟做错了什么？？提前致谢！

Answer 1

img标签不是标签的父母，a他们是兄弟姐妹。您想使用.prev()而不是.parents().

并且attr已弃用，您应该使用prop. 而且你不需要使用replace，你可以做prop('src', 'minus.gif')

Answer 2

嵌套 html 的方式，它永远不会抓取<img>标签，因为它不被视为active类<img>标签的父级。

您应该考虑最明确地更改 HTML 的输出方式。

但是，这是您当前嵌套 html 的方式的问题的解决方案。

$(".active").parents(".div_toggle").prev("h3:first").children(":first").addClass("plus");

$('h3.toggle_action img').each(function(){
    if ($(this).attr('src') && $(this).hasClass('plus') && $(this).attr('src').indexOf('plus.gif') > 0)
    {
        var imgSrc = $(this).attr('src').replace('plus.gif','minus.gif');
        $(this).attr('src', imgSrc);
    }
});

好的，它的作用是它抓取"active"父母的<h3>孩子<img>并向它添加一个名为的类，"plus"并在循环标签时使用这个类<h3 class="toggle_action"><img>，确保使用 plus 作为一个类来抓取 img 标签，并将其他的更改为减去.gif 图像。

希望这对您有所帮助。如果是这样，请将其标记为您的答案。