Javascript Jquery click函数只调用一次

我正在尝试使用JavaScript实现一个功能。我的html页面上有一个图标（div标签）。我想实现一个功能，当我点击它时，它会变成另一个图标。但是当我点击那个改变了的图标时，它会恢复到原来的图标

现在，问题是，第一次单击时图标会变为另一个图标，但第二次单击时不会恢复为原始图标。实际上，当我第二次单击它时，它的jquery的click函数并没有被调用

有什么想法吗

代码如下：

$("#volume-slide-img").hide();

$("#volume-icon").click(function() {
    if (document.getElementById('volume-slide-img').style.display == 'none') {
        $("#volume-slide-img").show();
    }
    else {
        $("#volume-slide-img").hide();
    }
});

---

您可以使代码简单得多。试试这个：

$('#volume-slide-img').hide();
$('#volume-icon').click(function(){
    $('#volume-slide-img').toggle();
});

---

我认为您要做的是在单击该类时打开#音量图标

当点击图标时，

toggleClass

将执行它所说的操作，切换一个类（如果已应用，则取消应用，如果未应用，则应用）。该类可用于设置图标

---

但是我可能遗漏了一些东西……你说“我有一个图标”，你想“当我点击它时”做一些事情，但是你的代码示例在点击图标时似乎改变了其他一些事情。

@Don Zacharias搞定了它，但我发现了一些漂亮的体积图标，所以这里有一个与他类似的方法，但有背景图像

HTML:

jQuery：

$('#volume-icon').click(function() {
    $(this).toggleClass('mute');
});

---

那代码对我有用。问题可能在别的地方。你有完整的密码吗？plz格式更好，可以使用jsfiddle.netno，它只是一个图标，点击后会显示图标+新图标（默认情况下是隐藏的）。这有意义吗？我想是的。那样的话，你的原件应该可以用。您的脚本在页面上的什么位置？

#volume-icon {
    width:256px;
    height:256px;
    cursor:pointer;
    background-image:url('http://icons.iconarchive.com/icons/icons-land/vista-multimedia/256/Volume-Hot-icon.png')
}
#volume-icon.mute {
    background-image:url('http://lh3.ggpht.com/_uU5cLRayUdQ/S48MYDVnjlI/AAAAAAAADik/GWYRNg06mhE/Volume-Normal-Red-icon.png');
}

$('#volume-icon').click(function() {
    $(this).toggleClass('mute');
});