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会这样做？如果我将切换更改为单击（），我的图像显示没有问题，我可以切换到不同的图像，但当然不会。我在控制台中没有错误，页面不会导入会影响img的其他样式。我错误地使用了切换器吗？如果您需要更多信息，请与我们联系。

由于

Answer 1

你误解了jQuery切换的作用。

它'切换'元素的可见性，因此它消失了。它确实不是最好的名字，但我们以前都必须在.click()内编写我们自己版本的toggle方法。

参见文档：

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

jQuery toggle（）可以防止加载图像

2 个答案: