Question

如何设置一个图像，单击时更改为另一个图像，然后再次单击时还原为原始图像，同时仍然独立执行功能。在我的例子中，我想要一个播放按钮，当按下该按钮时会转到暂停按钮。

但是，当按下正确的按钮时，我需要同时具有播放和暂停功能。这些工作做不同的按钮，但我希望一个按钮具有所有功能。我尝试了一些事情，但每次都有一个播放/暂停功能不让对方工作。

  $('#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

问题出在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 2

您可以使用一个小型状态机来完成此操作。将状态保留在对象中，并在按钮的事件侦听器中处理下一个状态：

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 *

*图像可能需要一秒钟才能加载。

Answer 3

我喜欢在这些情况下使用类，因为它使代码更容易理解：

$('#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

   }
})

如何使用<img/>标签来执行2个不同的js函数？

3 个答案: