【かんたんjQuery】 クリックした要素を変えてみる

こんにちは、デザイナーのKAです。
今回は、jQueryですぐに使いそうなサンプルコードを書いていきたいと思います。

地味だけど、意外と使うのがクリックしたら画像が切り替わるという仕組みです。

jQueryプラグイン使うのもいいですが、数行書くだけで済むものなら、いちいちプラグイン組み込むのも手間ですよね?
ここで紹介するものは、かんたんにできますのでやってみてください。

 

では、いらすとやさんの素材を使って、門を開けてみたいと思います。
用意したのは閉じている門と、空いている門です。

mon_gate_closemon_gate_open

 
htmlを用意します。

<img class="gazo" src="mon_gate_close.png" alt="">

 
今回、シンプルにしたいので CSSは無しです。
jQueryのコアファイルは適宜用意してください。
 

 

クリックしたら開くようにするコードは以下。

 

ソースコードの流れを上からかんたんに解説します。

2行目 gazoクラスを持っている要素をクリックしたとき
3行目 もし同じ要素openクラスを持っていなかったら
4行目 同じ要素src属性mon_gate_open.png書き換えてopenクラスを付ける
5行目 そうでなければ
6行目 同じ要素src属性mon_gate_close.png書き換えてopenクラスを消す

 
動作デモは以下です。

 

 

 

トリガーでクラスの付替えをまとめてしまおう

ちょっとシンプルにしてみます。

変更点は、.addClass(‘open’)、.removeClass(‘open’)でopenクラスの付け外しをしていたのを、.toggleClass(‘open’)で切り替わるようにしました。

 
動作デモは以下です。

 

 

 

いっそファイル名で判別してしまう

もうちょっとシンプルにしてみましょう。
if文の判別基準をopenクラスにしていましたが、せっかくファイル名でopenを使っているので、それがきっかけなるようにしてみます。

変更点は、openクラスの有無で判断せずに src属性の中に open の文字列が含まれるかどうかを .indexOf(‘open’) で判別したところです。

※indexOfはその文字列が対象の頭から何番目にあるのかを調べるもので。存在しない場合は、-1を出力します。

 
動作デモは以下です。

 

 

 

どうでしたでしょうか。
極力、シンプルになるように jQuery だけでコードを書いています。

ここから応用していただければ、javascript や css3 でアニメーションいれたりもできますのでがんばってみてください。

 

 

 

 

 

【追記】正規表現のひとつ

/^(?=.*open).*$/) が正規表現でのopen文字列が入っているかを判別するコードです。

Share on Facebook0Tweet about this on TwitterShare on Google+0Email this to someone