Ошибки с заменой изображения

Question

Я перепробовал все возможные комбинации методов для замены изображения, но не нашел решения, которое работает.

Я загрузил проблемный код здесь: http://dl.dropbox.com/u/2959730/index.html

Я бы предложил загрузить исходный код и попробовать ваш код.Проблема заключается в функции player.playPause (), которая должна быть присоединена к #playButt img.

Пожалуйста, помогите, я боролся уже много часов!

РЕДАКТИРОВАТЬ:

Я все исправил и согласно предложению я сейчас использую этот код для 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 onclick="playPause(); return false;" не вызывает playPause, потому что не может найти функцию в глобальной области видимости. Вам нужно изменить свой клик на:

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(); в консоли, вы увидите, что код замены изображения теперь работает. Однако вам нужно выяснить, где ipod2 клонируется в JS, и исправить это.

Answer 2

Вам определенно нужно иметь player.playPause () вместо просто playPause ().

И у вас, похоже, есть проблема в функции css или height файла slider.js, поскольку Firebug сообщает, что [0] не определено.

Answer 3

На самом деле вы не присоединяетесь к изображению #playButt, насколько я могу судить. Все, что вы делаете, это определяете атрибут onclick этого изображения и просто вызываете playPause, который не определен.

Вы изменили документ с тех пор, как задали свой вопрос?

Работает ли это, если у вас onclick = "player.playPause (); return false;" в вашем обработчике onclick для изображения #playButt?