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 и не могу этого сделать:

У меня есть li с id="play1" при нажатии на него: воспроизвести песню и снова нажать "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 БИН

    Я оставлю вам элегантный пример, чтобы иметь возможность добавлять больше строк аудио, не повторяя один и тот же код снова и снова в 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:

    <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);
}

    Таким образом, вы прикрепляете событие click элемента #play1 к click_1 при выполнении кода, и если выполняется click_1, click_1 не привязан, а click_2 привязан. Затем при клике_2 клик_2 освобождается, а клик_1 привязывается.

    • 0