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

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 {
			}

		}
	});
}

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

では、良きjQueryライフを。