Question

我正在尝试使用JavaScript来实现一项功能。我的html页面上有一个图标（div标签）。我希望实现一旦它更改为另一个图标时单击它的功能。但是当我点击那个改变了的图标时，它应该恢复到原来的图标。

现在，问题是，第一次点击时图标会更改为另一个图标，但第二次点击时图标不会恢复为原始图标。实际上，当我第二次点击它时，它的jquery的点击功能没有被调用。

任何想法？

以下是代码：

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

Answer 1

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

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

Answer 2

我认为您想要做的是在点击它时在＃volume-icon上切换课程。

I mocked it up on jsFiddle.点击图标后，toggleClass会按照说明进行操作，切换课程（如果已应用，则取消应用，否则应用）。该类可用于设置图标。

我可能会遗漏一些东西......你说“我有一个图标”，你想做点什么“当我点击它”但你的代码样本似乎改变了一些东西 else 点击图标。

Answer 3

@Don Zacharias钉了它，但我发现了一些漂亮的音量图标，所以这里有类似的方法，但背景图像。

http://jsfiddle.net/pxfunc/xbUQZ/

HTML：

<div id="volume-icon" title="click to toggle!"></div>

CSS：

#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');
}

jQuery的：

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

Jquery click函数只被调用一次

3 个答案: