Как использовать один тег <img> для выполнения двух различных функций js?

Question

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

Однако, когда правильная кнопка нажата, мне нужно иметь обе функции воспроизведения и паузы. Эти работы делают разные кнопки, но я бы хотел, чтобы одна кнопка имела все функциональные возможности. Я пробовал несколько вещей, но каждый раз одна из функций play/pause не позволяет другому работать.

$('#startSlider').click(function(){ 
    if (document.getElementById("startSlider").src = "Play.png"){ 
    document.getElementById("startSlider").src = "Pause.png"; 
    scrollSlider(); 
    } 
    else if (document.getElementById("startSlider").src != "Play.png"){ 
    clearTimeout(tmOt); 
    document.getElementById("startSlider").src = "Play.png"; 
    } 
    }); 

---

<img src="Play.png" id="startSlider"/> 

Answer 1

Мне нравится использовать классы в таких ситуациях, как это делает код немного легче следовать:

$('#startSlider').click(function(){ 
    $(this).toggleClass('pause') 

    if ($(this).hasClass('pause')) { 
     // Button is paused change to play 
     $(this).attr('src', 'Play.png') 

     // Pause function goes here 

    } else { 
     // Button is play change to pause 
     $(this).attr('src', 'Pause.png') 

     //play function goes here 

    } 
}) 

Answer 2

проблема заключается в вашем if блоке, вы используете = не ==

if (document.getElementById("startSlider").src = "Play.png"){// you are assigning here not comparing 

вы назначаете play.png каждый раз, когда нажмите вызовы на изображении.

---

вы используете JQuery, то почему вы не используете this, чтобы сделать его более простым.

$('#startSlider').click(function(){ 
    if (this.src == "play.png"){ 
     this.src = "pause.png"; 
    }else{ 
    this.src = "play.png"; 
    } 
}); 

check this fiddle

Answer 3

Вы можете сделать это с небольшой государственной машиной. Вы сохраняете состояния внутри объекта, и обработать следующее состояние у слушателя событий кнопки:

var states = { 
    _next: 'play', 
    next: function() { 
    return this[this._next]() 
    }, 
    play: function() { 
    img.src = 'pause.jpg' 
    button.textContent = 'Pause' 
    this._next = 'pause' 
    }, 
    pause: function() { 
    img.src = 'play.jpg' 
    button.textContent = 'Play' 
    this._next = 'play' 
    } 
} 

button.addEventListener('click', states.next.bind(states)) 

Это более общий ответ на вашу проблему, что вы должны адаптироваться к коду.

DEMO:http://jsbin.com/moxoca/1/edit *

* Изображение может занять второе, чтобы загрузить.