切换按钮和图像切换答案

【问题标题】：Toggle Button and Image Switch切换按钮和图像切换
【发布时间】：2013-06-20 07:28:22
【问题描述】：

这是我的代码

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

【问题讨论】：

标签： jquery image toggle

【解决方案1】：

找到解决办法

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

【讨论】：

【解决方案2】：

我不知道左定位在做什么，但是如果您在单击按钮时尝试将左箭头图像与右箭头图像交换，它可能看起来像这样：

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

【讨论】：

左侧定位是隐藏左侧导航栏。将其设置为 0，因为它在三层 DIVS 之间设置了特定大小。它按原样工作。我就是无法切换按钮。