切換按鈕和圖像切換

Question

這是我的代碼有

JQUERY

//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 = ""; 
    }); 
}); 

這是我的HTML

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

我想切換按鈕，左箭頭和之間切換適當地點擊右箭頭。我到處看，任何幫助將不勝感激！

我試過，但它不工作

$(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(); 
});