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>

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

任何帮助都会受到赞赏，甚至谢谢你们。

Answer 1

您可以将功能传递到.attr()以更改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'); 
    });
  });
});

在函数中，src中的function(i, src)参数是旧的src值，因此我们只是在.replace()上执行{{3}}，您可以将其传递给它如果需要，也可以使用更复杂的正则表达式。

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

1 个答案: