javascript - jQuery toggle() 防止加载图像

Question

我是 jQuery 新手，发现切换功能真的很有吸引力。我希望图像在单击并再次返回后切换到不同的图像，如下所示：

$(document).ready(function() {
    $("#expand").toggle(function(){
        $(this).attr("src","images/expandWidget.png");
    },function(){
        $(this).attr("src", "images/minimizeWidget.png");
    });
}); // end ready

图像本身是这样声明的：

<img id="expand" src="images/minimizeWidget.png"></img></div>

我注意到当我通过 Chrome 运行它时，图像变为：

<img id="expand" src="images/minimizeWidget.png" style="display: none;">

我的图像没有显示。为什么 Chrome 会这样做？如果我改为将切换更改为 click()，我的图像显示没有问题，我可以切换到不同的图像，但当然不能返回。我在控制台中没有错误，并且页面没有导入会影响 img 的其他样式。我是否错误地使用了切换开关？如果您需要更多信息，请告诉我。

谢谢

Answer 1

您误解了 jQuery toggle 的作用。

它“切换”元素的可见性，因此它消失了。诚然，这不是最伟大的名字，但我们过去都必须在内部编写自己的切换方法版本.click()。

请参阅文档：

http://api.jquery.com/toggle/

你可能想要这样的东西：

$("#expand").click(function(){
    if($(this).attr("src") == "images/expandWidget.png") {
        $(this).attr("src", "images/minimizeWidget.png");
    } else {
        $(this).attr("src","images/expandWidget.png");
    }
});

Answer 2

而不是toggle使用.click()

LIVE DEMO

var images = ["images/expandWidget.png", "images/minimizeWidget.png"], c=0;
$("#expand").click(function(){
    this.src = images[++c%2];
});