JQuery Toggle Issue、2回のクリックが必要

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

WHE n I再生ボタンをクリックする一時停止ボタンに切り替わり、一時停止ボタンをクリックすると再生に切り替わりますが、その後は2回のクリックが必要です...曲は停止しますが、画像は再生されますあなたがもう一度クリックまで文句を言わないあなたはトグルを必要といけない...私は周りを探してみましたが、原因のjavaとjQueryの私の最低限の知識に私は自分のコードに修正を適用することができませんでした

...

Answer 1

リンクを使用する場合は、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 2

を切り替えます、単に.click()を使用して、あなたの問題を解決します：

$(function() 
{ 

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

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

}); 

Answer 3

はこれを試してみてください：

$(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 4

私は考えることができる最も簡単なコードがある

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