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

How to execute with jquery a function on click and on click again execute another function?

  • 772

I haven't used much jquery and I can't do this:

I have a li with id="play1" on click on it: play a song and on click on "play1" again pause playback. So always, play / stop.

<li id="play1">



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

use a counter?

html

3 Answers

  1. Best Answer

    Put a flag that indicates the state of the player. You can create the flag with JavaScript:

    var playing = false;

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

    Or via an attribute data-:

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

    And you get the attribute on the click event:

    $('#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. DEMO in JS BIN

    I leave you here an elegant example to be able to add more rows of audio without repeating the same code over and over again in 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. Another way to do it is to use jquery's bind and unbind methods:

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

    This way you attach the click event of the #play1 element to click_1 when executing the code and if click_1 executes, click_1 is unbound and click_2 is bound. Then on click_2, click_2 is unbound and click_1 is bound.

    • 0