Jquery toggleActiveは機能しません

私は実際にJavascriptでコーディングする方法を知りません。 Airconsoleの場合、私はコントローラーを作成する必要があります。なぜなら私は私たちのチームでCSSとHTMLを使用できる唯一のチームだからです。Jquery toggleActiveは機能しません

ここでは、押されたときに色を変えるボタンを作成したかったのですが、その色のままです。よく試しましたが、動作させる方法を理解できません。あなたが私を助けることを願っています。

マイHTML：ここ

<div id="characterScreen_readyButton" class="characterScreen_center" ontouchend="sendReady();" ontouchend="sendReady();"> 
    <div class="readyButton">   
    </div> 
</div>

私のCSS：

.readyButton{ 
      height: 100%; 
      width: 100%; 
      margin: 0; 
      padding: 0; 
      background: url("images/readyButton.png") no-repeat center; 
      background-size: contain; 

     } 

.readyButton.active { 
      height: 100%; 
      width: 100%; 
      margin: 0; 
      padding: 0; 
      background: url("images/readyButtonP.png") no-repeat center; 
      background-size: contain; 
     }

そして、私はjavascript：

<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.js" > 
$('.readyButton').click(function(){ 
    if($(this).hasClass('active')){ 
     $(this).removeClass('active') 
    } else { 
     $(this).addClass('active') 
    } 
}); 
</script>

出典

2017-10-10 Mike Ponton

がreadyButton持つdiv要素は、あなたがそれには、（1）バインドクリックイベントハンドラをバインドするとき、それはHTMLで表示された後に存在する、または（2）を確認していることを確認するために、バインドするafter the DOM is ready：

$(document).ready(function() { 
    $('.readyButton').click(function() { 
    $(this).toggleClass("active"); 
    }); 
});

出典

2017-10-10 12:33:02 orip

あなたは内部のスクリプトで<script src=を持つことはできません。は、この問題を修正します：あなたが使用することができます

<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.js" ></script> 
<script> 
$('.readyButton').click(function(){ 
    if($(this).hasClass('active')){ 
     $(this).removeClass('active') 
    } else { 
     $(this).addClass('active') 
    } 
}); 
</script>

出典

2017-10-10 12:27:33

.toggleClassの代わりに、クラスの追加と削除

<script type="text/javascript" src="https://code.jquery.com/jquery- 
3.2.1.js" ></script> 
<script> 
$('.readyButton').click(function(){ 
$(this).toggleClass("active"); 
}); 
</script>

出典

2017-10-10 12:27:39

これはどのように問題を解決しますか？それでも動作するはずです。 – Sablefoste

@Sablefoste最初の問題は '

変更：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 

<script type="text/javascript"> 
    //Other javascript 
</script>

出典

2017-10-10 12:29:07 Ehsan

Jquery toggleActiveは機能しません

答えて

関連する問題