Jquery 點擊 function 只被調用一次

Question

我正在嘗試使用 JavaScript 來實現功能。 我的 html 頁面（div 標簽）上有一個圖標。 我想實現當我點擊它時它變成另一個圖標的功能。 但是當我點擊那個改變的圖標時，它應該恢復到原來的圖標。

現在，這是問題所在，第一次單擊時圖標會更改為另一個圖標，但第二次單擊時不會恢復為原始圖標。 實際上，當我第二次單擊它時，它的 jquery 的單擊 function 沒有被調用。

有任何想法嗎？

以下是代碼：

$("#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 時切換 class 。

我在 jsFiddle 上模擬了它。 單擊該圖標時， toggleClass將執行它所說的操作，切換 class（如果已應用，則取消應用，如果不應用，則應用）。 class 可用於設置圖標。

我可能會遺漏一些東西......你說“我有一個圖標”並且你想做一些“當我點擊它時”但是當你點擊圖標時你的代碼示例似乎改變了其他東西。

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