javascript - JQuery 切换问题，需要点击两次

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