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，{在{3}}

<击>

您的onclick 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)。

另外两件事：

该.fadeIn(200)应放置回调内，否则运行淡出完成之前（因此没有淡入淡出效果的话）。
您不需要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的位置并修复它。

Answer 2

从我所知道的，你实际上并没有附加到#playButt图像。您所做的只是定义该图像的onclick属性，只调用未定义的playPause。

您提出问题后是否更改了文件？

如果你有onclick =“player.playPause（）;它是否有效;返回false;”在#playButt图像的onclick处理程序中？

Answer 3

你肯定需要拥有player.playPause（）而不仅仅是playPause（）。

你似乎在slider.js的css或height函数中遇到问题，因为Firebug报告a [0]未定义。

图像替换时出错

3 个答案: