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

如果您使用链接，请添加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 3

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

<强> 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 4

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

$(function()
{

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

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

});

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

4 个答案: