•  2
•  2
•  2
•  12

jQueryが動いていないように思える場合に、まず試してみるべき方法があります。

jQueryのコードをfunctionで囲む

(function($){
　コード
}(jQuery))

という形式でコードを囲むと、jQueryがあっさりと動くことがあります。

例えば、チェックボックスの背景色を制御する下記のjQueryのコードが動かない場合、

$(function(){
	$("table td:has(input[type=checkbox])").hover(function(){
		$(this).css("background-color","#efefef");
	},function(){
		$(this).css("background-color","transparent");
	});
	
	$("table td:has(input[type=checkbox])").click(function(){
		var chkb = $(this).children("input[type=checkbox]");
		if(chkb.attr("checked")) {
			chkb.attr('checked', false);
		}else{
			chkb.attr('checked', true);
		}
	});
	$("table td input[type=checkbox]").click(function(){
		if($(this).attr("checked")) {
			$(this).attr('checked', false);
		}else{
			$(this).attr('checked', true);
		}
	});
});

そのjQueryを囲むと、下記のようになります。

(function($){//これで囲む

$(function(){
	$("table td:has(input[type=checkbox])").hover(function(){
		$(this).css("background-color","#efefef");
	},function(){
		$(this).css("background-color","transparent");
	});
	
	$("table td:has(input[type=checkbox])").click(function(){
		var chkb = $(this).children("input[type=checkbox]");
		if(chkb.attr("checked")) {
			chkb.attr('checked', false);
		}else{
			chkb.attr('checked', true);
		}
	});
	$("table td input[type=checkbox]").click(function(){
		if($(this).attr("checked")) {
			$(this).attr('checked', false);
		}else{
			$(this).attr('checked', true);
		}
	});
});

}(jQuery));//これで囲む

これで、jQueryが動くようになる場合がありますので、まずは試してみる価値があるかもしれません。


jQueryデザインブック　仕事で絶対に使うプロのテクニック

• 2
• 2
• 2
• 12