使用正则表达式将子元素图像从关闭更改为打开并返回

Question

为了保持代码简洁，我希望使用正则表达式和 jQuery 来切换图像悬停内的打开和关闭状态。

jQuery:

$(function(){
  $("ul.dropdown li").hover(function(){
    $(this).addClass("hover");
    $('ul:first',this).css('visibility', 'visible');

  }, function(){
    $(this).removeClass("hover");
    $('ul:first',this).css('visibility', 'hidden');
  });
});

html:

<ul class="dropdown">
  <li><a href=""><img src="images/nav_first_off.png" /></a>
    <ul class="sub_menu sub1"><li>
      <div class="topnav_dropdown_left"><a href=""><img src="images/topnav_dropdown_first.jpg" /></a></div>
    </li></ul>
  </li>
  <li><a href=""><img src="images/nav_second_off.png" /></a>
    <ul class="sub_menu sub2"><li>
      <div class="topnav_dropdown_left"><a href=""><img src="images/topnav_dropdown_second.jpg" /></a></div>
    </li></ul>
  </li>
  <li><a href=""><img src="images/nav_third_off.png" /></a>
    <ul class="sub_menu sub3"><li>
      <div class="topnav_dropdown_left"><a href=""><img src="images/topnav_dropdown_third.jpg" /></a></div>
    </li></ul>
  </li>
</ul>

因此，使用上面的悬停功能，使用 li 悬停更改后续的 nav_first_off.png、nav_second_off.png 并使用正则表达式剪切 _off.png 并切换到 _on.png。

任何帮助将不胜感激，感谢您的关注。

Answer 1

您可以将函数传递到 .attr() 来更改 < code>src 属性，如下所示：

$(function(){
  $("ul.dropdown li").hover(function(){
    $(this).addClass("hover");});
    $('ul:first',this).css('visibility', 'visible');
    $('a img', this).attr('src', function(i, src) { 
      return src.replace('_off','_on'); 
    });
 }, function(){
    $(this).removeClass("hover");
    $('ul:first',this).css('visibility', 'hidden');
    $('a img', this).attr('src', function(i, src) { 
      return src.replace('_on','_off'); 
    });
  });
});

在函数中，function(i, src) 中的 src 参数是旧的 src > 值，所以我们只是做一个 .replace( ） 对此，如果需要，您还可以向其传递更复杂的正则表达式。