Home / Questions / 26503
Accepted
Rafael Hernández
Asked: 2020-10-08 04:17:32 +0800 CST 2020-10-08 04:17:32 +0800 CST

如何在单击时使用 jquery 执行一个函数并在再次单击时执行另一个函数？

  • 772

我没有使用太多 jquery，我不能这样做：

我有一个 id="play1" 的 li 点击它：播放一首歌，然后再次点击“play1”暂停播放。所以总是，播放/停止。

<li id="play1">



$( "#play1" ).click(function() 
{
    //si play1 click ejecutar audio1.play();
    //otro click en play1 ejecutar audio1.pause();
});

使用计数器？

html

3 Answers

  1. Best Answer

    放置一个指示玩家状态的标志。您可以使用 JavaScript 创建标志：

    var playing = false;

$('#1').click(function() {
  if(!playing) {
    audio1.play();
    playing = true;
  } else {
    audio1.pause();
    playing = false;
});

    或通过属性data-：

    <div id="audio1" data-status="paused">...</div>

    你得到点击事件的属性：

    $('#audio1').click(function() {
  var status = $(this).attr('data-status');
  if(status === "paused") {
    audio1.play();
    $(this).attr('data-status', 'playing');
  } else {
    audio1.pause();
    $(this).attr('data-status', 'paused');
  }
});
    • 3

  2. JS BIN 中的 DEMO

    我给你留下了一个优雅的例子，能够添加更多的音频行，而无需在 jQuery 中一遍又一遍地重复相同的代码。

    $(document).on('click', '.playAudio', function(){
 
  var whichAudio = $('#audio' + $(this).data('audio'));
  
  whichAudio[0].paused
  ? whichAudio[0].play() 
  : whichAudio[0].pause();    
});
    li {
  list-style: none;  
}

li:nth-child(odd) {
  cursor: pointer;  
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<ul>
  <li class="playAudio" data-audio="1">Play audio #1</li>
  <li>-------------</li>
  <li class="playAudio" data-audio="2">Play audio #2</li>
  <li>-------------</li>
  <li class="playAudio" data-audio="3">Play audio #3</li>
</ul>

<audio id="audio1">
  <source src="http://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3">
</audio>
<audio id="audio2">
  <source src="http://www.soundhelix.com/examples/mp3/SoundHelix-Song-2.mp3">
</audio>
<audio id="audio3">
  <source src="http://www.soundhelix.com/examples/mp3/SoundHelix-Song-4.mp3">
</audio>

    • 2

  3. 另一种方法是使用 jquery 的 bind 和 unbind 方法：

    <li id="play1">play/stop</li>

$("#play1").bind("click", click_1);
var click_1 = function() {
  //tu código
  $("#play1").unbind("click");
  $("#play1").bind("click", click_2);
}

var click_2 = function() {
  //tu código
  $("#play1").unbind("click");
  $("#play1").bind("click", click_1);
}

    这样，您在执行代码时将 #play1 元素的 click 事件附加到 click_1，如果 click_1 执行，则 click_1 未绑定，而 click_2 已绑定。然后在 click_2 上，click_2 未绑定，click_1 已绑定。

    • 0