JQuery Toggle Issue, требуется два клика

Question

Я не слишком свободно говорю в Javascript, но мне удалось изменить этот код и сделать так, чтобы он переключался между кнопкой воспроизведения и кнопкой паузы для песни ... это выглядит так:

    $(function()
    {
       $("#plbutton").toggle(function()
       { 
            $("#playit").hide();
            $("#pauseit").show();
       },

       function()
       { 

       });
    });

    $(function() 
    {
       $("#pabutton").toggle(function()
       { 
            $("#pauseit").hide();
            $("#playit").show();
       },

       function()
       {

       });
    });

Это HTML:

    <span id="playit"><a href="javascript:void(0)" onclick="document.getElementById('WeFuckinBall').play()" id="plbutton"><img src="images/playbutton.png" /></a></span>
    <span id="pauseit" ><a href="#" onclick="document.getElementById('WeFuckinBall').pause()" id="pabutton"><img src="images/pausebutton.png" /></a></span>

и это css для интервала паузы:

    #pauseit{
        display: none;}

Теперь, когда я нажимаю кнопку воспроизведения, он переключается на кнопку «Пауза», затем, когда я нажимаю кнопку «Пауза», он переключается на воспроизведение, но после этого ему требуется ДВА щелчка, чтобы работать ... песня, но изображение не будет переключаться, пока вы не нажмете снова ...

Я пытался осмотреться, но из-за своего минимального знания java и jquery я не смог применить исправления к своему коду ...

Answer 1

Попробуйте это:

$(document).ready(function() {
    $("#plbutton").on("click", function(e)
    { 
        e.preventDefault();
        $("#playit").hide();
        $("#pauseit").show();
    });
    $("#pabutton").on("click", function(e)
    { 
        e.preventDefault();
        $("#pauseit").hide();
        $("#playit").show();
    });
});

Answer 2

самый простой код, который я могу придумать, это

HTML:

<span id="playit"><img src="images/playbutton.png" /></span>
<span id="pauseit" ><img src="images/pausebutton.png" /></span>

Jquery:

var elems = $("#playit,#pauseit")
elems.on("click", function(){ 
    elems.toggle();
    if($(this).attr('id') == 'playit'){
       $('#WeFuckinBall').play();
    }else{
       $('#WeFuckinBall').pause();
    }
});

Answer 3

Если вы используете ссылки, добавьте e.preventDefault ();

если не это должно работать

<span id="playit"><img src="images/playbutton.png" /></span>
<span id="pauseit"><img src="images/pausebutton.png" /></span>


$(document).ready(function() {
  $("#playit").on("click", function(e) {
    $("#$WeFuckinBall").play() 
    $(this).hide();
    $("#pauseit").show();
  });
  $("#pauseit").on("click", function(e) { 
    $("#WeFuckinBall").pause() 
    $(this).hide();
    $("#playit").show();
  });
});

Вы даже можете пропустить интервал

Answer 4

Вам не нужно переключаться, просто использование .click() решит вашу проблему:

$(function()
{

$("#plbutton").click(function()
{ 
        $("#playit").hide();
        $("#pauseit").show();
});

$("#pabutton").click(function()
{ 
        $("#pauseit").hide();
        $("#playit").show();
}

});