jQuery заменяет идентификатор элемента, но он не распознается позже

Question

У меня есть кнопка воспроизведения, а также кнопка вперед.

HTML, таким образом:

<div id="control"> 
    <a href="#" id="pause"></a> 
    <a href="#" id="next"></a> 
</div> 

То, что я хочу, когда кто-то нажимает паузу, значок воспроизведения появляется, и когда они нажимают игру, значок паузы появляется снова. Теперь это можно сделать с переключением, но мне также нужно, чтобы значок воспроизведения появлялся, когда кто-то нажимал дальше, а значок паузы появляется, когда они нажимают на значок воспроизведения. Toggle не работает для этого.

Вот мой jQuery и, очевидно, из-за природы javascript это не работает. (Добавленный атрибут не распознается)

Какое хорошее решение для того, что я пытаюсь сделать?

// Play/pause is clicked, alternate between starting and stopping the interval 

$('#pause').click(function(event) { 
    $(this).css("background-image", "url(../images/controls_play.png)"); 
    $(this).attr('id', 'play'); 
}); 

$('#play').click(function(event) { 
    $(this).css("background-image", "url(../images/controls_pause.png)"); 
    $(this).attr('id', 'pause'); 
}); 


$('#next').click(function(event) { 
    $('#pause').css("background-image", "url(../images/controls_play.png)"); 
    $('#pause').attr('id', 'play'); 
}); 

Answer 1

Я думаю клики не прикрепление при изменении идентификатора попытаться жить или делегировать

$('#pause').live("click", function(event) { 
    $(this).css("background-image", "url(../images/controls_play.png)"); 
    $(this).attr('id', 'play'); 
}); 

$('#play').live("click",function(event) { 
    $(this).css("background-image", "url(../images/controls_pause.png)"); 
    $(this).attr('id', 'pause'); 
}); 


$('#next').live("click",function(event) { 
    $('#pause').css("background-image", "url(../images/controls_play.png)"); 
    $('#pause').attr('id', 'play'); 
}); 

Answer 2

Вы можете использовать .delegate() для обработчика воспроизведения/паузы, как это:

$('#control').delegate("#pause", "click", function(event) { 
    $(this).css("background-image", "url(../images/controls_play.png)") 
      .attr('id', 'play'); 
}).delegate("#play", "click", function(event) { 
    $(this).css("background-image", "url(../images/controls_pause.png)") 
      .attr('id', 'pause'); 
}); 

You can test it out here. Теперь вместо того, чтобы находить элементы управления с соответствующими идентификаторами при загрузке страницы, это прослушивает событие click и проверяет ID во время события, что даст вам желаемый эффект от изменения действия. Обратите внимание, что это более эффективно, чем .live(), поскольку вы точно знаете, где находятся элементы.

Answer 3

Попробуйте использовать .live ('click', function() {});

$('#pause').live('click', function(event) { 
    $(this).css("background-image", "url(../images/controls_play.png)"); 
    $(this).attr('id', 'play'); 
}); 

Вы можете попробовать другой подход. Привяжите событие к классу, а затем измените идентификатор. Затем проверьте идентификатор, прежде чем делать что-нибудь

Answer 4

Что вы могли бы попробовать сделать это вместо ссылки play или pause, вы ссылаетесь control и установите HTML внутри control на основе того, что было нажато. Вы также разделили бы между play и pause через классы. Так, например, вы бы что-то вроде ...

$('#control').click(function(event) { 
    if($(this).attr('class') == 'play') { 
     $(this).css("background-image", "url(../images/controls_pause.png)"); 
     $(this).attr('class', 'pause'); 
    } 
    if($(this).attr('id') == 'pause') { 
     $(this).css("background-image", "url(../images/controls_play.png)"); 
     $(this).attr('class', 'play'); 
    } 
}); 

$('#next').click(function(event) { 
    $('#control').css("background-image", "url(../images/controls_play.png)"); 
    $('#control').attr('id', 'play'); 
}); 

Вы также можете сэкономить несколько строк кода, назначая фоновые изображения для классов, так что вам не нужно будет строки, которые говорят .css('background-image', 'x.gif') как те, свойства будут в вашем CSS.

Answer 5

Вы можете использовать data, чтобы сохранить состояние кнопки. Так, чтобы установить состояние кнопки, как использование игры:

$("#playPause").css("background-image", "url(../images/controls_play.png)").data("state","play"); 

затем, чтобы получить состояние кнопки вы просто сделать:

$("#playPause").data("state"); 

так далее нажмите вы:

$("#playPause").click(function(event) { 
    var state = $("#playPause").data("state"); 
    if(state === "play"){ 
     $("#playPause").css("background-image", "url(../images/controls_pause.png)").data("state","pause"); 
    } 
    else { 
     $("#playPause").css("background-image", "url(../images/controls_play.png)").data("state","play"); 
    } 
}); 

и при следующем нажатии:

$('#next').click(function(event) { 
    $("#playPause").css("background-image", "url(../images/controls_play.png)").data("state","play"); 
});