Question

我有一个自定义手风琴菜单，每个可扩展的UL（toggle_action）旁边都有[+]链接以扩展其子（div_toggle）。对于活跃的

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

旁边的minus.gif，因为它们已经扩大了。我搜索了大部分时间并且发疯了。以下是我认为肯定会起作用的最新尝试。我没有得到任何错误 - 它只是不起作用。

这是我的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输出的方式。

但是，这是以当前嵌套方式解决问题的方法。

$(".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标记，并将其他标记更改为minus.gif图像。

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

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

2 个答案: