jQueryでタイミング違うけど同じ処理がある場合

Question

タイミングが違うけど同じ処理があります。次のような感じです。

////読み込み時
$(document).ready(function(){
//同じ処理
});

////入力時
$('input[name=write]').keyup(function() {
//同じ処理
});

////チェック時
$('input[name=check]').change(function(){
//同じ処理
});

このような場合、どうすればひとまとめにできるのでしょうか？

(function($){

	////読み込み時
	$(document).ready(function(){
		//同じ処理	
		var write = $('input[name=write]').val();
		var multi = $('#multi').text();
		var result = write*multi;
		$('#test').text(result);
	});	
	
	////入力時
	$('input[name=write]').keyup(function() {
		//同じ処理	
		var write = $('input[name=write]').val();
		var multi = $('#multi').text();
		var result = write*multi;
		$('#test').text(result);
	});
	
	////チェック時
	$('input[name=check]').change(function(){
		//同じ処理
		var write = $('input[name=write]').val();
		var multi = $('#multi').text();
		var result = write*multi;
		$('#test').text(result);
	});	
	
})(jQuery);

Answer 1

thisも使っていないようですし、1つの関数にしてしまいましょう。

function func(){
        //同じ処理    
        var write = $('input[name=write]').val();
        var multi = $('#multi').text();
        var result = write*multi;
        $('#test').text(result);
}

$(function(){
  func();
  $('input[name=write]').keyup(func);
  $('input[name=check]').change(func);
});

なお、イベントの設定はready（$()）の中で行うことをおすすめします。

Comments

[退会済みユーザー]

いくつかの機能をfunctionの中に入れて、funcという名前を付ける。すると、別のところでfuncと書くだけで、中に入れた機能がズラっと生じるのですか！？今までチラホラ見かけた書き方でしたが、初めてこの意味がわかりました！感動です！
すぐにアレンジできそうな箇所がいくつもあるので、さっそく挑戦してみたいと思います。
どうもありがとうございます。

Answer 2

どちらかをもう片方に依存させればよいかと
なおロード時の処理はtriggerで処理すればよいでしょう。

$(function(){
  $('input[name=write]').on('keyup',function() {
    var write = $('input[name=write]').val();
    $('#test').text(parseInt($('#test').text()||0)+1);
  }).eq(0).trigger('keyup');
  $('input[name=check]').on('change',function(){
    $('input[name=write]').eq(0).keyup();
  });
});

<input type="text" name="write">
<input type="text" name="write">
<input type="text" name="write">
<input type="checkbox" name="check">
<input type="checkbox" name="check">
<input type="checkbox" name="check">
<div id="test"></div>

Comments

[退会済みユーザー]

yambejpさん、いつもありがとうございますっ。

今回のですが、
.triggerと
parseIntは
かろうじて分かりますが、

||0)+1);とか
.eq(0)など
少し難しめなアレンジが入っていて、

私では使いまわしが難しそうです。

いつもご回答くださっているのに、ベストアンサーはスミマセン！！！(>_<)????