토글 버튼 및 이미지 전환

Question

이것은 내가

이 내 HTML

<div id="hs-nav"> 
    <a href="#" ><img src="images/left-arrow.png" width="20" height="20" alt=""></a> 
</div> 

입니다

//Hide/Show Audio Player 
$(document).ready(function() 
{ 
var $button = $("#hs-nav"); 
var $navbar = $("#nav-column"); 

$navbar.animate(); 
$button.toggle(
    function() 
    { 
     $("#nav-column").hide(); 
     document.getElementById("screen-column").style.left = "0"; 
    }, 
    function() 
    { 
     $("#nav-column").show(); 
     document.getElementById("screen-column").style.left = ""; 
    }); 
}); 

JQUERY 내가 왼쪽 화살표와 사이를 전환 토글 버튼을 원하는 가지고있는 코드입니다 클릭하면 오른쪽 화살표가 표시됩니다. 나는 도처에 보였다, 어떤 도움이라도 인정 될 것이다!

나는이 시도하지만

$(document).ready(function() 
{ 
var $button = $("#hs-nav"); 
var $navbar = $("#nav-column"); 

$navbar.animate(); 
$button.toggle(
    function() 
    { 
     $("#nav-column").hide(); 
     document.getElementById("screen-column").style.left = "0"; 
     document.getElementById("hs-nav").addClass("right-arrow"); 
    }, 
    function() 
    { 
     $("#nav-column").show(); 
     document.getElementById("screen-column").style.left = ""; 
     document.getElementById("hs-nav").removeClass("right-arrow"); 
    }); 
}); 

작동하지 않습니다 신경 끄시 고

솔루션 나는 왼쪽 위치가 무엇을하는지 아무 생각이

//Hide/Show Audio Player 
$(document).ready(function() 
{ 
var $button = $("#hs-nav"); 
var $navbar = $("#nav-column"); 

$navbar.animate(); 
$button.toggle(
    function() 
    { 
     $("#nav-column").hide(); 
     document.getElementById("screen-column").style.left = "0"; 
     $("#hs-nav").addClass("right-arrow"); 
    }, 
    function() 
    { 
     $("#nav-column").show(); 
     document.getElementById("screen-column").style.left = ""; 
     $("#hs-nav").removeClass("right-arrow"); 
    }); 
}); 

Answer 1

있어,하지만 당신이 ' 단추를 클릭 할 때 왼쪽 화살표 이미지를 오른쪽 화살표 이미지로 바꾸려면 다음과 같이 보일 것입니다 :

$(document).ready(function() { 
    $("#hs-nav").on('click', function() { 
     $(this).find('img').prop('src', function(_,source) { 
      return source.indexOf('left-arrow') != -1 ? 
        source.replace('left-arrow', 'right-arrow'): 
        source.replace('right-arrow', 'left-arrow'); 
     }); 
    }); 
    $("#nav-column").toggle(); 
});