Использование регулярных выражений для изменения изображения подэлемента с выкл на вкл и обратно

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, nav_second_off.png с помощью li hover и с помощью регулярного выражения, чтобы вырезать _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(), вы можете передать его более сложным Также при необходимости выполните регулярное выражение.