regex를 사용하여 하위 요소 이미지를 off에서 on 및 back으로 변경

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 및 잘라 정규식을 사용하여 함께 _off.png로 전환하고 _on.png로 전환하십시오.

도움을 주시면 고맙겠습니다.

기능에

$(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()을하고있는 :

당신은 .attr()에 함수를 전달할 수

Answer 1

이처럼 src 속성을 변경하려면 당신이 필요하다면 더 복잡한 정규 표현식을 전달할 수 있습니다.