javascript - 图像替换时出错

Question

我已经尝试了替换图像的所有可能的方法组合，但没有找到有效的解决方案。

我在这里上传了有问题的代码: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); 
    }) 
} 

Answer 1

<罢工> playPause()被定义为 var player 的属性，在 playlist.js .

<罢工>

您的点击onclick="playPause(); return false;"没有调用 playPause，因为它在全局范围内找不到该函数。您需要将 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)在回调中。

另外两件事:

1. .fadeIn(200)应该放在回调内部，否则它会在 fadeOut 完成之前运行(因此根本没有淡入淡出效果)。
2. 您不需要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();在控制台中，您将看到图像替换代码现在可以工作。但是，您需要找出 JS 中克隆 ipod2 的位置并修复该问题。