jQuery Snippets #9

  • Posted on
  • Category : Tips
jQuery Snippets #9

基礎的なものからちょっとした機能の実装方法など、jQueryに関する個人的なメモ・スニペットリストです。書いている内容に対して「もっとスマートにできる」とか「そもそも間違ってる」みたいなのがあれば、ツッコミ大歓迎なのでコメントなど通じて是非教えてください。

動きをすぐ確認できるデモなどは基本的に用意していないので、実際の動きを確認したい場合などは自身で簡単な環境を作成して試してもらうか、CodePenJSFiddleなどを利用して確認してください。

jQuery Snippets #9 目次

  1. セレクトボックスを連動させる
  2. 年月日のセレクト内の項目を自動生成する
  3. ラジオボタンでコンテンツ切り替え
  4. 各種フォーム要素の値取得
  5. 各種フォーム要素の値有無や変化を判別して処理をする
  6. 入力されたら(されていたら)label要素にクラスを付与
  7. パスワードを表示させる
  8. .each()を逆にする
  9. オーバーレイの作成と表示・非表示の処理
  10. 座標を取得する

1. セレクトボックスを連動させる

地域選択のセレクトを選択すると都道府県のセレクトが選択可能になり、さらに地域選択で選択されたものによって都道府県選択の中身を変更するという動きを実装する方法です。
ブラウザによっては単純にdata属性の値をチェックして.show().hide()使って表示・非表示の切り替えとかで実装できるのですが、Safariなど一部ブラウザではそれだと実装できない(不要な項目を非表示にできない)ので、下記のようにわざわざデフォルトの値を取得したり.remove()で不要な項目を取り除くという形にしています。

実装にはHTMLとjQueryをそれぞれ下記のように記述します。

HTML

<select id="select-area" name="area">
	<option value="">地域を選択してください</option>
	<option value="北海道・東北">北海道・東北</option>
	<option value="関東">関東</option>
	<option value="中部">中部</option>
	<option value="近畿">近畿</option>
	<option value="中国">中国</option>
	<option value="四国">四国</option>
	<option value="九州・沖縄">九州・沖縄</option>
</select>
<select id="select-prefecture" name="prefecture">
	<option value="">都道府県を選択してください</option>
	<option data-area="北海道・東北" value="北海道">北海道 </option>
	<option data-area="北海道・東北" value="青森県">青森県</option>
	<option data-area="北海道・東北" value="岩手県">岩手県</option>
	<option data-area="北海道・東北" value="秋田県">秋田県</option>
	<option data-area="北海道・東北" value="宮城県">宮城県</option>
	<option data-area="北海道・東北" value="山形県">山形県</option>
	<option data-area="北海道・東北" value="福島県">福島県</option>
	<option data-area="関東" value="茨城県">茨城県</option>
	<option data-area="関東" value="栃木県">栃木県</option>
	<option data-area="関東" value="群馬県">群馬県</option>
	<option data-area="関東" value="埼玉県">埼玉県</option>
	<option data-area="関東" value="千葉県">千葉県</option>
	<option data-area="関東" value="東京都">東京都</option>
	<option data-area="関東" value="神奈川県">神奈川県</option>
	<option data-area="中部" value="新潟県">新潟県</option>
	<option data-area="中部" value="富山県">富山県</option>
	<option data-area="中部" value="石川県">石川県</option>
	<option data-area="中部" value="福井県">福井県</option>
	<option data-area="中部" value="山梨県">山梨県</option>
	<option data-area="中部" value="長野県">長野県</option>
	<option data-area="中部" value="岐阜県">岐阜県</option>
	<option data-area="中部" value="静岡県">静岡県</option>
	<option data-area="中部" value="愛知県">愛知県</option>
	<option data-area="近畿" value="三重県">三重県</option>
	<option data-area="近畿" value="滋賀県">滋賀県</option>
	<option data-area="近畿" value="奈良県">奈良県</option>
	<option data-area="近畿" value="和歌山県">和歌山県</option>
	<option data-area="近畿" value="京都府">京都府</option>
	<option data-area="近畿" value="大阪府">大阪府</option>
	<option data-area="近畿" value="兵庫県">兵庫県</option>
	<option data-area="中国" value="岡山県">岡山県</option>
	<option data-area="中国" value="広島県">広島県</option>
	<option data-area="中国" value="鳥取県">鳥取県</option>
	<option data-area="中国" value="島根県">島根県</option>
	<option data-area="中国" value="山口県">山口県</option>
	<option data-area="四国" value="香川県">香川県</option>
	<option data-area="四国" value="徳島県">徳島県</option>
	<option data-area="四国" value="愛媛県">愛媛県</option>
	<option data-area="四国" value="高知県">高知県</option>
	<option data-area="九州・沖縄" value="福岡県">福岡県</option>
	<option data-area="九州・沖縄" value="佐賀県">佐賀県</option>
	<option data-area="九州・沖縄" value="長崎県">長崎県</option>
	<option data-area="九州・沖縄" value="大分県">大分県</option>
	<option data-area="九州・沖縄" value="熊本県">熊本県</option>
	<option data-area="九州・沖縄" value="宮崎県">宮崎県</option>
	<option data-area="九州・沖縄" value="鹿児島県">鹿児島県</option>
	<option data-area="九州・沖縄" value="沖縄県">沖縄県</option>
</select>

jQuery

var $areaSelect = $('#select-area'),
    $prefectureSelect = $('#select-prefecture'),
    prefectureDefaultVal = $prefectureSelect.html();
$('select option').prop('selected', false);
$prefectureSelect.prop('disabled', true);

$areaSelect.on('change', function() {
	var areaVal = $(this).val();
	if ( areaVal == '' ) {
		$prefectureSelect.prop('disabled', true);
		$prefectureSelect.children('option').first().prop('selected', true);
	} else {
		$prefectureSelect.prop('disabled', false);
		$prefectureSelect.children('option').remove();
		$prefectureSelect.html(prefectureDefaultVal).children('[data-area]').each(function() {
			var areaData = $(this).data('area');
			if ( areaData != areaVal ) {
				$(this).remove();
			}
		});
	}
});

目次へ

2. 年月日のセレクト内の項目を自動生成する

年月日を選択するために用意した各select内のoptionを自動生成する方法です。
下記サンプルコードのようにHTMLでは特に数字を記述していませんが、ブラウザで確認するとjQueryを使って月のselect内には1~12までのoption、日のselect内には1~31までのoptionがそれぞれ挿入されています。
また、年のselectにはついては「現在の年から何年前まで表示するか」というのを選択できるようになっており、oldYearという変数部分で任意の年数を指定します。

HTML

<select class="year"><option>----</option></select> 年
<select class="month"><option>--</option></select> 月
<select class="day"><option>--</option></select> 日

jQuery

var time = new Date(),
    thisYear = time.getFullYear(),
    oldYear = thisYear - 50;

for ( var i = thisYear; i >= oldYear; i-- ) {
	$('.year').append('<option value="' + i + '">' + i + '</option>');
}
for ( var i = 1; i <= 12; i++ ) {
	$('.month').append('<option value="' + i + '">' + i + '</option>');
}
for ( var i = 1; i <= 31; i++ ) {
	$('.day').append('<option value="' + i + '">' + i + '</option>');
}

目次へ

3. ラジオボタンでコンテンツ切り替え

ラジオボタンの選択した項目によって入力内容の表示を切り替えるもので、例えばお問い合わせの種類によって入力してもらう項目を変えたいときなどに利用できます。
ここでは表示させるコンテンツの判別にidを利用する形にしていますが、少し書き換えればvalueの値によって判別するのも可能です。

HTML

<ul id="js-switch-nav">
	<li><input id="foo" type="radio" name="example" value="foo"><label for="foo">foo</label></li>
	<li><input id="bar" type="radio" name="example" value="bar"><label for="bar">bar</label></li>
	<li><input id="baz" type="radio" name="example" value="baz"><label for="baz">baz</label></li>
</ul>
<div id="foo-contents" class="switch-contents">
	<!-- foo contents -->
</div>
<div id="bar-contents" class="switch-contents">
	<!-- bar contents -->
</div>
<div id="baz-contents" class="switch-contents">
	<!-- baz contents -->
</div>

jQuery

var $switchNav = $('#js-switch-nav input[type="radio"]'),
    $switchContents = $('.switch-contents');
$switchNav.prop('checked', false);
$switchContents.hide();
$switchNav.on('change', function() {
	var selectID = $(this).attr('id');
	$switchContents.hide();
	$('#' + selectID + '-contents').show();
});

目次へ

4. 各種フォーム要素の値取得

input type="text"selectといった各フォーム要素の値を取得する方法で、基本的には.val()を使えば容易にできますが、<input type="checkbox">に関しては複数選択される可能性もあるために.map()を用いる形(少し書き換えれば.each()でも可)で取得する必要があります。
ただ、同じく複数選択することができるmultiple指定のselectについては、.val()だけで複数の値を取得できます。

jQuery

$('button').on('click', function() {
	var inputTextVal = $('input[type="text"]').val();
	console.log('text:' + inputTextVal);

	var textareaVal = $('textarea').val();
	console.log('textarea:' + textareaVal);

	var radioVal = $('input[type="radio"]:checked').val();
	console.log('radio:' + radioVal);

	var checkboxVal = $('input[type="checkbox"]:checked').map(function() {
		return $(this).val();
	}).get();
	console.log('checkbox:' + checkboxVal);

	var selectSingleVal = $('select[name="single"]').val();
	console.log('select:' + selectSingleVal);

	var selectMultiVal = $('select[name="multiple"]').val();
	console.log('select:' + selectMultiVal);
});

button要素クリックで、それぞれの値をコンソールに出力させる。

目次へ

5. 各種フォーム要素の値有無や変化を判別して処理をする

こちらは各フォーム要素の変化時に何か処理をするという動きを実装したい場合などに用いる方法で、input type="text"であれば何か入力されているかを、input type="checkbox"であればチェックがされているかどうかなどを判別します。
また、上で紹介した値取得などと組み合わせれば、入力された内容や選択された値によって何か処理をするなどが可能です。

jQuery

$('input[type="text"]').on('change', function() {
	if ( $(this).val() != '' ) {
		console.log('入力済み');
	} else {
		console.log('未入力');
	}
});

$('textarea').on('change', function() {
	if ( $(this).val() != '' ) {
		console.log('入力済み');
	} else {
		console.log('未入力');
	}
});

$('input[type="radio"]').on('change', function() {
	if ( $(this).prop('checked') == true ) {
		console.log('チェック有り');
	} else {
		console.log('チェック無し');
	}
});

$('input[type="checkbox"]').on('change', function() {
	if ( $(this).prop('checked') == true ) {
		console.log('チェック有り');
	} else {
		console.log('チェック無し');
	}
});

$('select').on('change', function() {
	if ( $(this).val() != '' ) {
		console.log('選択された');
	} else {
		console.log('選択されていない');
	}
});

目次へ

6. 入力されたら(されていたら)label要素にクラスを付与

例えば、あらかじめ付与するクラスに対してCSSのtransitionanimationを指定しておき、未入力状態の見栄えとしてはlabel要素を入力フィールドに重ねて配置しておきます。
あとは。下記と組み合わせることで文字が入力されたら(されていたら)label要素に指定したクラスが付与され、アニメーションしながら入力フィールド外に移動するといったような実装が可能になります。

HTML

<label for="foo">label</label>
<input type="text" id="foo">

jQuery

var $field = $('input[type="text"]'),
    hasClass = 'has-value';
$field.on('focus', function() {
	$(this).prev('label').addClass(hasClass);
}).on('blur', function() {
	if ( !$(this).val() ) {
		$(this).prev('label').removeClass(hasClass);
	}
});

目次へ

7. パスワードを表示させる

input type="password"へ入力した内容は伏字表示されますが、それを用意したチェックボックスにチェックを入れると伏字が解除されてテキスト表示されるようにする方法です。
ちなみに、IEやEdgeの場合はデフォルトでこのような機能が用意されており、入力欄右側にあるアイコンでマスクを解除できるようになっています。
ひと通りのブラウザで同じような見栄えに揃えたい場合は、例えばCSSを使ってチェックボックスやラベルを入力欄右側に配置してIEやEdgeで実装されているアイコンを隠すなどの方法で揃えることができます。

HTML

<input type="password">
<input type="checkbox" id="mask-switch"><label for="mask-switch">show</label>

jQuery

var switchButton = $('#mask-switch'),
    switchLabel = $('#mask-switch + label'),
    switchField = $('input[type="password"]'),
    showText = 'show',
    maskText = 'mask';
switchButton.on('change', function() {
	if ( $(this).prop('checked') == true ) {
		switchField.attr('type', 'input');
		switchLabel.text(maskText);
	} else {
		switchField.attr('type', 'password');
		switchLabel.text(showText);
	}
});

目次へ

8. .each()を逆にする

複数の要素に繰り返し処理を行いたいときなどに利用する.each()は通常上から処理していきますが、それを逆から(下から)処理させる方法で、具体的には.reverse()を使って並びを逆にしてから.each()を使って処理を実行していきます。
例として下記のようなソースの場合、単純に.each()利用時は上から01 → 02 → 03 → 04 → 05の順でコンソールに出力されますが、この場合は05 → 04 → 03 → 02 → 01といった順でコンソールに出力されます。

HTML

<ol>
	<li>01</li>
	<li>02</li>
	<li>03</li>
	<li>04</li>
	<li>05</li>
</ol>

jQuery

$($('ol li').get().reverse()).each(function() {
	console.log($(this).text());
});

目次へ

9. オーバーレイの作成と表示・非表示の処理

モーダルやナビゲーションを表示する際にメインコンテンツと区別をつけたりするために表示させることが多いオーバーレイ(半透明の背景など)を作成したり、作成したオーバーレイの表示・非表示の処理を実装する方法です。
作成は単純に.appendTo()でオーバーレイとして使用する要素を作成しており、表示・非表示については特定のクラスにスタイルを指定しておき、それを.addClass().removeClass()で切り替えることで実装しています。
表示についてはbutton要素をクリックしたタイミングのみですが、非表示にする動きはオーバーレイ部分のクリックやEscキーを利用するなど3パターンあります。

jQuery

var $overlay = $('<div id="js-overlay"></div>').appendTo('body'),
    showClass = 'is-show'
$('button').on('click', function() {
	$overlay.addClass(showClass);
});

function hideOverlay() {
	$overlay.removeClass(showClass);
}

// オーバーレイをクリックでオーバーレイを非表示に
$overlay.on('click', function() {
	hideOverlay();
});

// `.close` がついた要素をクリックでオーバーレイを非表示に
$('.close').on('click', function() {
	hideOverlay();
});

// Escキー押下でオーバーレイを非表示に
$(document).on('keyup', function(e) {
	if ( e.keyCode == 27 ) {
		hideOverlay();
	}
});

ちなみに、とりあえず表示確認したい場合は下記のようなCSSを記述してもらえれば確認できると思います。

CSS

#js-overlay {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1000;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, .6);
	transition: .4s;
	opacity: 0;
	visibility: hidden;
}
#js-overlay.is-show {
	opacity: 1;
	visibility: visible;
}

目次へ

10. 座標を取得する

何かしらの理由で座標を取得したい場合に使える方法です。
このサンプルコードの場合はある要素をクリックした際にその要素内での座標を取得するというものになりますが、対象を$('html')などにすればページ全体での座標を取得できます。

jQuery

$('element').on('click', function(e) {
	var offset = $(this).offset(),
	    x = (e.pageX - offset.left),
	    y = (e.pageY - offset.top);
	console.log('X:' + x + ', Y:' + y);
});

ちなみに、小数点以下が必要ないのであれば下記のようにMath.floor()を利用することで整数として取得できます。

jQuery

$('element').on('click', function(e) {
	var offset = $(this).offset(),
	    x = Math.floor(e.pageX - offset.left),
	    y = Math.floor(e.pageY - offset.top);
	console.log('X:' + x + ', Y:' + y);
});

目次へ

上記以外のjQuery Snippetsに関しては下記ページにまとめているので、興味ある方はこちらもご覧ください。

Back to Top

NxWorld

Sorry... doesn't support your browser

To get the best possible experience using our site we recommend that you upgrade to a modern web browser.NxWorldではご利用中のブラウザサポートはしていません。
Internet Explorerのアップグレード行う、もしくはその他のブラウザを使用しての閲覧をお願いします。