とあるIT企業の『のりたまブログ』

仕事はIT系、趣味は音ゲー。オタクの日々をツラツラと書きます

クリックイベントで遊んでみる【jQuery】

ソースは15分程の走り書きですが。

 

以前CSSについて書いた際

itgame.hatenablog.com

同様に以下を用います。

<html>
<head>
<link rel="stylesheet" href="css/base.css" />
<script type="text/javascript" src="js/jquery-3.2.0.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</head>

<body>
イベントサンプル
<div class="divBox" id="box1">Box1</div>
<div class="divBox" id="box2">Box2</div>
</body>
</html>

※余談ですが、以下の読み込みだとNGで、エラーもはかないんですね。。。

<script type="text/javascript" src="js/main.js"/>

 

出力結果:

イベントサンプル

Box1
Box2

 

これらの要素をクリックした際に、以下で挙動を付けていきます。

js/main.js

$(document).ready(function(){
// クリックイベント
$(".divBox").on("click",function(){
if($(this).hasClass("colored")){
$(this).removeClass("colored");
$(this).css("background-color","#00BFFF");
}else{
$(this).addClass("colored");
$(this).css("background-color","#FDEE79");
}
});
// ダブルクリックイベント
$("#box1").on("dblClick",function(){
console.log("test");
});
});

 

$(document).ready(function(){

DOMの読み込みが完了したタイミングを指定しています。

ちなみに以下はそれよりも遅いタイミングで、

画像などのデータが全て読み込まれた後です。

$(window).load(function(){

 

$(".divBox")
$("#box1")

セレクターで要素を指定します。

前者がクラスでの指定、後者がIDでの指定です。

今回のサンプルでは両ボックスとも同じクラスを指定しているので、

どちらにもクリックイベントが実装されます。

また、box1クラスは上のボックスのみが持つ値のため、ダブルクリックイベントは上のボックスのみに実装されます。実装できていません。原因がわからず。。。

 

その他、クリック時にクラスを付与/没収し、色を変えています。

 

クリックした際の実行結果がこちら。

上、下、上の順にクリック

 

イベントサンプル

Box1
Box2

 

イベントサンプル

Box1
Box2

 

 イベントサンプル

Box1
Box2

 

今回はここまで。他のイベントはそのうち。。。

 

追記

スマホから見るとインデントもそうですがページ全体のバランスががが‥

はてブのレスポンシブ対応があるそうなので後で考えてみます。