【かんたんjQuery】 クリックした要素を変えてみる
公開日: 2018.10.02
最終更新日: 2022.10.31
こんにちは、デザイナーのKAです。
今回は、jQueryですぐに使いそうなサンプルコードを書いていきたいと思います。
地味だけど、意外と使うのがクリックしたら画像が切り替わるという仕組みです。
jQueryプラグイン使うのもいいですが、数行書くだけで済むものなら、いちいちプラグイン組み込むのも手間ですよね？
ここで紹介するものは、かんたんにできますのでやってみてください。
では、いらすとやさんの素材を使って、門を開けてみたいと思います。
用意したのは閉じている門と、空いている門です。
htmlを用意します。
<img class="gazo" src="mon_gate_close.png" alt="">
今回、シンプルにしたいので CSSは無しです。
jQueryのコアファイルは適宜用意してください。
クリックしたら開くようにするコードは以下。
$(function(){
$('.gazo').click(function(){
if($(this).hasClass('open') == false){
$(this).attr('src', 'mon_gate_open.png').addClass('open');
}else{
$(this).attr('src', 'mon_gate_close.png').removeClass('open');
}
});
});
ソースコードの流れを上からかんたんに解説します。
3行目 もし、同じ要素がopenクラスを持っていなかったら
4行目 同じ要素のsrc属性をmon_gate_open.png に書き換えて、openクラスを付ける
5行目 そうでなければ
6行目 同じ要素のsrc属性をmon_gate_close.png に書き換えて、openクラスを消す
動作デモは以下です。
トリガーでクラスの付替えをまとめてしまおう
ちょっとシンプルにしてみます。
$(function(){
$('.gazo').click(function(){
if($(this).hasClass('open') == false){
$(this).attr('src', 'mon_gate_open.png');
}else{
$(this).attr('src', 'mon_gate_close.png');
}
$(this).toggleClass('open');
});
});
変更点は、.addClass(‘open’)、.removeClass(‘open’)でopenクラスの付け外しをしていたのを、.toggleClass(‘open’)で切り替わるようにしました。
動作デモは以下です。
いっそファイル名で判別してしまう
もうちょっとシンプルにしてみましょう。
if文の判別基準をopenクラスにしていましたが、せっかくファイル名でopenを使っているので、それがきっかけなるようにしてみます。
$(function(){
$('.gazo').click(function(){
if($(this).attr('src').indexOf('open') !== -1){
$(this).attr('src', 'mon_gate_open.png');
}else{
$(this).attr('src', 'mon_gate_close.png');
}
});
});
変更点は、openクラスの有無で判断せずに src属性の中に open の文字列が含まれるかどうかを .indexOf(‘open’) で判別したところです。
※indexOfはその文字列が対象の頭から何番目にあるのかを調べるもので。存在しない場合は、-1を出力します。
動作デモは以下です。
どうでしたでしょうか。
極力、シンプルになるように jQuery だけでコードを書いています。
ここから応用していただければ、javascript や css3 でアニメーションいれたりもできますのでがんばってみてください。
【追記】正規表現のひとつ
$(function(){
$('.gazo').click(function(){
if($(this).attr('src').match(/^(?=.*open).*$/)){
$(this).attr('src', 'mon_gate_close.png');
}else{
$(this).attr('src', 'mon_gate_open.png');
}
});
});
/^(?=.*open).*$/) が正規表現でのopen文字列が入っているかを判別するコードです。
