切换按钮和图像切换

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