この基本的なtoggleClassをJQueryで動作させることはできません

私は間違っているのか分かりません。ボタンをクリックしたときにクラスを切り替えることで、ボタンが押されたように見えるようにしようとしています。この基本的なtoggleClassをJQueryで動作させることはできません

jQueryがロードされたことを確認するために、JavaScriptのif文を使用しました。ここで

はコードです：

<!DOCTYPE html> 
<html> 
<head> 
<script src="jquery-1.12.3.min.js"></script> 
<script> 
$("button").click(function(){ 
    $("button").toggleClass("active-class"); 
}); 
</script> 
<style type="text/css"> 
.active-class { 
    background-color:red; 
} 

/* Non-important styles */ 
button { 
    font-size:15px; 
    padding:10px; 
    background-color:#E8E8E8; 
    border:1px solid rgba(0,0,0,0.3); 
    border-radius:5px; 
    outline:none; 
} 
</style> 
</head> 
<body> 
<button>Click to toggle!</button> 



</body> 
</html>

私はそれは絶対何もしない]ボタンをクリックします。助言がありますか？

出典

2016-05-07 Timothy Fisher

リスナーを接続しようとすると、ボタンはまだDOMツリーに読み込まれません。 –

CSSを本体の内側に入れてください。 – Gerard

end bodyタグの前にjsを移動します。または文書準備機能を追加してください。

<!DOCTYPE html> 
<html> 
<head> 
    <script type="text/javascript" src="https://code.jquery.com/jquery-2.2.3.min.js"></script> 
    <script> 
    $(document).ready(function() { 
    $("button").click(function(){ 
     $("button").toggleClass("active-class"); 
    }); 
    }); 
    </script> 
    <style type="text/css"> 
    .active-class { 
    background-color:red; 
    } 
    /* Non-important styles */ 
    button { 
    font-size:15px; 
    padding:10px; 
    background-color:#E8E8E8; 
    border:1px solid rgba(0,0,0,0.3); 
    border-radius:5px; 
    outline:none; 
    } 
    </style> 
</head> 
<body> 
    <button>Click to toggle!</button> 
</body> 
</html>

出典

2016-05-07 20:36:15

お互いに感謝します。これは初めてjQueryを使用しているので、今は何が必要なのかを見てください！ –

あなたは大歓迎です。答えを選ぶことを忘れないでください（投票の下にチェックを入れてください）。 –

bodyタグが終わる前にscriptタグを挿入します。

$(document).ready(function(){ 
    $('button').on('click', function(){ 
     $(this).toggleClass('active-class'); 
    }) 
});

出典

2016-05-07 20:35:55 Josh

ドームがロードされていないため動作しません。 –

文書関数にラップします。 – Josh

この基本的なtoggleClassをJQueryで動作させることはできません

答えて

関連する問題