javascript - Jquery click 函数只被调用一次

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