よく使うjQuery集
.hover
$(function(){
var triger = 'トリガー要素';
var target = 'ターゲット要素';
$(triger).hover(function(){
$(target).fadeToggle();
});
});
グロナビのhoverアクションなどでサブメニューを表示したりするのによく使う。
サムネイルクリックでメイン画像切り替え
<div class="big_img"> <img style="display:none" src="~~.jpg" alt=""> <img style="display:none" src="~~.jpg" alt=""> <img style="display:none" src="~~.jpg" alt=""> </div> <div class="thum"> <div><img src="~~.jpg" alt=""><p>キャプション</p></div> <div><img src="~~.jpg" alt=""><p>キャプション</p></div> <div><img src="~~.jpg" alt=""><p>キャプション</p></div> </div>
$(function(){
var oya = '.big_img img';
var ko = '.thum img';
$(oya).eq('0').show();
$(ko).on('click', function(){
var i = $(this).index();
$(oya).hide();
$(oya).eq(i).fadeIn('fast');
});
});
・サムネイルを複数枚表示
・メイン画像が切り替わってもサムネイルは動かない
・サムネイルにキャプションも表示
いつも使用しているスライダープラグインslickだとサムネイルが動いてしまうのでNG。またslickのdotsをサムネイルにすることで動かないようにもできるが、サムネイル箇所にキャプションを一緒に表示する必要があったので今回は簡単なものを自作。
あと他のプラグインを一から覚えるの面倒出し、何より重くなるので。本当は「.big_img > img」は一枚だけにして、urlだけ引っ張っても良い。今回はwp環境でサムネイルとメイン画像の呼び出しurlが違うので(サイズのため)この仕様。
form submitの２度押し防止
$(function () {
$('form').submit(function () {
$(this).find(':submit').css('pointer-events','none');
setTimeout(() => {
$(this).find(':submit').css('pointer-events','auto');
},
3000)
});
});
サブミット時にpointer-eventsをnoneにする。またjsのバリデートに引っかかった場合に、3秒後にクリックできるように戻す。jsを使わずphpなどでバリデーションかける場合は3秒後の処理は不要。
form 生年月日入力欄 常に現在の年から20年分表示
$(function () {
var i = new Date();
var year = i.getFullYear();
for(var num = year; num > year-20; num--){
$('#birthday_year').append($('<option>').html(num).val(num));
}
});
formのselectでよく使う「年」の動的範囲指定。20を変更すれば、任意の年数にできる。
タブ切り替え
See the Pen
eYZgVGe by Mugi Sasaki (@mugi-sasaki)
on CodePen.
よく使うタブ切り替え。同一ページに複数タブがあっても動きます。3列使用なのでCSSは適宜調整の必要あり。
jqueryでの外部html読み込み
$(function(){
var area = $('#hoge'); // 表示する場所
var path = $('/hoge.html'); // 表示するファイルの相対パス
$(area).load(path);
});
jquery3以降ではload()が動かないので注意
後から生成された要素にjqueryを使う
$(document).on('click','要素',function(){
// 生成された要素に対する内容を記述
});
checkboxの全部チェック（例：都道府県の地方チェックパターン）
$(function(){
const allInput = $('.all_check'); // 地方input
$(allInput).on('click',function(){
const prefInput = $(this).parent('label').next('.inner_wrap').find('input[type="checkbox"]');
if(this.checked){ // 地方inputにチェックがありの処理
$(prefInput).prop('checked',true);
} else { // 地方inputにチェックが無しの処理
$(prefInput).prop('checked',false);
}
});
$('input[name="pref"]').on('click',function(){
const allWrap = $(this).parents('.inner_wrap');
const allCheck = $(allWrap).prev().find('input');
const inputNum = $(allWrap).find('label').length; // 地方の子inputの数を数える
const inputChecked = $(allWrap).find('input:checked').length; // 地方の子inputのcheckedの数を数える
if(inputNum == inputChecked){ // 子inputが全てチェックされている時
$(allCheck).prop('checked',true);
} else { // 子inputが一つでもチェックが外れた時
$(allCheck).prop('checked',false);
}
});
});
<section class="chihou_wrap"> <label><input type="checkbox" name="chihou_pref" value="" class="all_check">北海道・東北</label> <div class="inner_wrap"> <label><input type="checkbox" name="pref" value="北海道">北海道</label> <label><input type="checkbox" name="pref" value="青森県">青森県</label> <label><input type="checkbox" name="pref" value="岩手県">岩手県</label> <label><input type="checkbox" name="pref" value="宮城県">宮城県</label> <label><input type="checkbox" name="pref" value="秋田県">秋田県</label> <label><input type="checkbox" name="pref" value="山形県">山形県</label> <label><input type="checkbox" name="pref" value="福島県">福島県</label> </div> </section> <section class="chihou_wrap"> <label><input type="checkbox" name="chihou_pref" value="" class="all_check">関東</label> <div class="inner_wrap"> <label><input type="checkbox" name="pref" value="茨城県">茨城県</label> <label><input type="checkbox" name="pref" value="栃木県">栃木県</label> <label><input type="checkbox" name="pref" value="群馬県">群馬県</label> <label><input type="checkbox" name="pref" value="埼玉県">埼玉県</label> <label><input type="checkbox" name="pref" value="千葉県">千葉県</label> <label><input type="checkbox" name="pref" value="東京都">東京都</label> <label><input type="checkbox" name="pref" value="神奈川県">神奈川県</label> </div> </section> <section class="chihou_wrap"> <label><input type="checkbox" name="chihou_pref" value="" class="all_check">北信越</label> <div class="inner_wrap"> <label><input type="checkbox" name="pref" value="新潟県">新潟県</label> <label><input type="checkbox" name="pref" value="富山県">富山県</label> <label><input type="checkbox" name="pref" value="石川県">石川県</label> <label><input type="checkbox" name="pref" value="福井県">福井県</label> <label><input type="checkbox" name="pref" value="山梨県">山梨県</label> <label><input type="checkbox" name="pref" value="長野県">長野県</label> </div> </section> <section class="chihou_wrap"> <label><input type="checkbox" name="chihou_pref" value="" class="all_check">東海</label> <div class="inner_wrap"> <label><input type="checkbox" name="pref" value="岐阜県">岐阜県</label> <label><input type="checkbox" name="pref" value="静岡県">静岡県</label> <label><input type="checkbox" name="pref" value="愛知県">愛知県</label> <label><input type="checkbox" name="pref" value="三重県">三重県</label> </div> </section> <section class="chihou_wrap"> <label><input type="checkbox" name="chihou_pref" value="" class="all_check">関西</label> <div class="inner_wrap"> <label><input type="checkbox" name="pref" value="滋賀県">滋賀県</label> <label><input type="checkbox" name="pref" value="京都府">京都府</label> <label><input type="checkbox" name="pref" value="大阪府">大阪府</label> <label><input type="checkbox" name="pref" value="兵庫県">兵庫県</label> <label><input type="checkbox" name="pref" value="奈良県">奈良県</label> <label><input type="checkbox" name="pref" value="和歌山県">和歌山県</label> </div> </section> <section class="chihou_wrap"> <label><input type="checkbox" name="chihou_pref" value="" class="all_check">中国・四国</label> <div class="inner_wrap"> <label><input type="checkbox" name="pref" value="鳥取県">鳥取県</label> <label><input type="checkbox" name="pref" value="島根県">島根県</label> <label><input type="checkbox" name="pref" value="岡山県">岡山県</label> <label><input type="checkbox" name="pref" value="広島県">広島県</label> <label><input type="checkbox" name="pref" value="山口県">山口県</label> <label><input type="checkbox" name="pref" value="徳島県">徳島県</label> <label><input type="checkbox" name="pref" value="香川県">香川県</label> <label><input type="checkbox" name="pref" value="愛媛県">愛媛県</label> <label><input type="checkbox" name="pref" value="高知県">高知県</label> </div> </section> <section class="chihou_wrap"> <label><input type="checkbox" name="chihou_pref" value="" class="all_check">九州・沖縄</label> <div class="inner_wrap"> <label><input type="checkbox" name="pref" value="福岡県">福岡県</label> <label><input type="checkbox" name="pref" value="佐賀県">佐賀県</label> <label><input type="checkbox" name="pref" value="長崎県">長崎県</label> <label><input type="checkbox" name="pref" value="熊本県">熊本県</label> <label><input type="checkbox" name="pref" value="大分県">大分県</label> <label><input type="checkbox" name="pref" value="宮崎県">宮崎県</label> <label><input type="checkbox" name="pref" value="鹿児島県">鹿児島県</label> <label><input type="checkbox" name="pref" value="沖縄県">沖縄県</label> </div> </section>
