javascript - 图像替换错误

我尝试过各种可能的方法来替换图像，但是没有找到有效的解决方案。

我在此处上传了有问题的代码：http://dl.dropbox.com/u/2959730/index.html

我建议下载源代码并尝试您的代码。问题在于应该附加在#playButt img上的player.playPause（）函数。

请帮助我已经奋斗了几个小时！

编辑：

我已经更正了所有内容，并且根据建议，我现在将这段代码用于playPause（），但仍然无法正常工作！这是我处理过的最令人沮丧的事情。

this.playPause = function(){
    this.status = !this.status;
    var status = this.status;
    var playEl = document.getElementById('play');
    $("#play").fadeOut(200, function(){
        if(status)
            playEl.src = "img/pauseButton.png";
        else
            playEl.src = "img/playButton.png";
        $("#play").fadeIn(200);
    })
}

最佳答案

playPause()在playlist.js中定义为var player的属性。

您的onclick onclick="playPause(); return false;"不会调用pl​​ayPause，因为它无法在全局范围内找到该函数。您需要将onclick更改为：

onclick="player.playPause(); return false;"

更新：

问题在于此回调：

$("#play").fadeOut(200, function(){
    if(this.status)
        playEl.src = "img/pauseButton.png";
    else
        playEl.src = "img/playButton.png";
}).fadeIn(200);

在该回调中未定义this.status，因为this现在引用元素#play。要解决此问题，您需要在回调之前声明var status = this.status，并在回调内部测试if(status)。

另外两件事：


.fadeIn(200)应该放在回调内部，否则它将在fadeOut完成之前运行（因此完全没有渐变效果）。
您不需要var playEl = document.getElementById('play');，因为您使用的是jQuery来获取元素。在回调内部，this关键字已引用该元素。


完整的代码应为：

var status = this.status = !this.status;
$("#play").fadeOut(200, function(){
    if(status)
        this.src = "img/pauseButton.png";
    else
        this.src = "img/playButton.png";
    $(this).fadeIn(200);
});

另一个更新：

除了上述修复之外，还有另一个问题。看起来页面上有两个带有id="play"的元素。实际上，整个＃ipod2是重复的。我检查了源代码，但它不存在，仅在实时DOM中存在。如果您在控制台中$("#play").remove();，您将看到图像替换代码现在可以使用了。但是，您需要找出ipod2在JS中的克隆位置并进行修复。