JQuery切换问题，需要两次单击

JQuery Toggle Issue, Requires Two Clicks

本文关键字：两次 单击 问题 JQuery      更新时间：2023-09-26

我对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的了解很少，我无法将修复程序应用于我的代码。。。

试试这个：

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

如果使用链接，请添加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();
  });
});

您甚至可以忽略span

我能想到的最简单的代码是

HTML:

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

查询：

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

您不需要切换，只需使用.click()即可解决您的问题：

$(function()
{
$("#plbutton").click(function()
{ 
        $("#playit").hide();
        $("#pauseit").show();
});
$("#pabutton").click(function()
{ 
        $("#pauseit").hide();
        $("#playit").show();
}
});
相关文章：