【jQuery】functionにイベントを登録して、色んなとこに呼び出す方法メモ

PC0I9A9745_TP_V1

jQeryを使ってイベントを作ると、ウィンドウサイズ変えた時とかスクロールした時とか、別の条件で同じイベントを発動させたい時がある。

動きを登録して、色んなとこで呼び出せたら便利だよなーって思っていたのだけど、そういう方法があるみたいなのでメモ。

先に言っておくとjQueryはそこまで得意ではなく自分用のメモですが、何かの参考になれば幸いです。

$(window).load(function(){

	jsEvent();
	$(window).resize(function() {
		jsEvent();
	});
});

function jsEvent() {
	if($(window).width() > 640) {
	$('.target').css('color','red')
	}
}



シンプルな形。

9行目でfunction jsEvent()に登録したイベントを1行目$(window).load時、ウインドウサイズが640pxより大きかったら実行。

同じくウインドウ幅を変えた時も同様に実行。
「ロード後にウインドウ幅を変えると挙動がおかしい」って指摘はよくありそうなので、↑で指定のウインドウサイズでだけイベントを実行するようにしとく。

$(window).load(function(){

	var target = ".target";
	takasasoroe(target, 2);
	$(window).resize(function() {
		takasasoroe(target, 2);
	});

});

function takasasoroe(elm, num) {
	var elm = $(elm);

	elm.css("height", "");

	elm.each(function (i) {
		var height;
		var $this = $(this);
		if (i === 0 || i % num === 0) {

			if($(window).width() > 640) {

				height = $this.height();
				for (var n = i + 1; n <= i + num - 1; n++) {
					if (height < elm.eq(n).height()) {
						height = elm.eq(n).height();
					}
				}
				for (var n = i; n <= i + num - 1; n++) {
					elm.eq(n).css("height", height + "px");
				}

			} else {
			}

		}
	});
}

応用。ウインドウサイズが指定の幅以上の時は、ターゲット要素の高さを2個ごとに揃える。タイルレイアウトでタイルの高さを揃えたい時に。

 

では、良きjQueryライフを。

SNSシェア

このエントリーをはてなブックマークに追加

関連記事

コメントを残す

メールアドレスが公開されることはありません。