JQuery切换问题，需要两次点击 [英] JQuery Toggle Issue, Requires Two Clicks

问题描述

我不是很流利的Javascript，但是我设法改变了这段代码，使它在歌曲的播放按钮和暂停按钮之间切换......它就像这样：

  $（function（）
 {
 $（＃plbutton）。toggle（function（）
 {
 $（＃playit）。hide（）; 
 $（＃pauseit）。show（）; 
}，
 
 function（）
 {
 
}）; 
}）; 
 $ b $（函数（）
 {
 $（＃pabutton）toggle（函数（）
 {
 $（＃pauseit ）.hide（）; 
 $（＃playit）。show（）; 
}，
 
 function（）
 {
 
}）; 
}）; 
  

这是HTML：

<$ p $ （0）onclick =document.getElementById（'WeFuckinBall'）。play（）id =（< c $ c>< span id =playit>< a href =javascript：void 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的最小知识，我无法申请修复了我的代码...

解决方案

如果您使用链接，请添加e.preventDefault（）;

如果不是这样的话应该可以工作

 < span id =playit><< ; img src =images / playbutton.png/>< / span> 
< span id =pauseit>< img src =images / pausebutton.png/>< / span> $（b）
 
 $（document）.ready（function（）{
 $（＃playit）。（click，function（e）{
 $（＃$ WeFuckinBall）。play（）
 $（this）.hide（）; 
 $（＃pauseit）。show（）; 
}）; 
 $（＃pauseit）。on（click，function（e）{
 $（＃WeFuckinBall）。pause（）
 $（this）.hide（）; 
 $（＃playit）。show（）; 
}）; 
}）; 
  

您甚至可以忽略跨度

I'm Not too Fluent in Javascript but I managed to alter this code and make it toggle between the Play button and the Pause Button for a song... it goes like so:

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

       function()
       { 

       });
    });

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

       function()
       {

       });
    });

This is the 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>

and this is the css for the pause span:

    #pauseit{
        display: none;}

Now When I Click the Play Button It switches to the Pause Button, then When I Click the Pause Button it Switches to the Play but after that It requires TWO Clicks in order to work... It'll pause/play the song but the image wont toggle till you click again...

I tried looking around but due to my minimal knowledge of java and jquery I wasn't able to apply the fixes to my code...

解决方案

If you use links, add e.preventDefault();

if not this should work

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

You can even leave out the span

这篇关于JQuery切换问题，需要两次点击的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！