JQUERYでの連続処理に関しての質問です。



チェックボックスに画像を押してもチェックできる機能と

クリックした後でその画像を差し替える機能を作ったのですが

個別だと両方機能するのですが、両方書くと機能しません

なんとなく、ひとつの処理にまとめなければいけないのはわかるのですが、どうやればよいのかわかりません

https://gist.github.com/833b7bf71869f5cf827c

上記のような機能を一度に処理するにはどうすればよいのか教えてください

また、なぜ個別に書くといけないのかも教えていただければありがたいです。

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2012/07/18 12:44:30
  • 終了:2012/07/18 14:07:35

ベストアンサー

id:Cherenkov No.1

Cherenkov回答回数1502ベストアンサー獲得回数4922012/07/18 13:43:27

ポイント100pt

画像を押してもチェックする機能はlabelを正しく使えばできます。
src切り替えは、checkboxにtoggleするとチェックされなかった(チェックしてチェックが外される?)のでchangeイベントを使いました。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type='text/javascript'>
$(function() {
	$('.checkbox_area :checkbox').change(function() {
		var img = $('label[for="' + this.id + '"] img');
		if (/kakikae/.test(img.attr('src'))) {
			var onSrc = img.attr('src').replace('kakikae.png', '.png');
		} else {
			var onSrc = img.attr('src').replace('.png', 'kakikae.png');
		}
		console.log(onSrc)
		img.attr('src', onSrc);
	});
});
</script>
</head>
<body>
<div class="checkbox_area">
<input type='checkbox'  id='ck1'>
<label for='ck1' >
<img src='http://test.png'/>
</label>
<input type='checkbox'  id='ck2'>
<label for='ck2' >
<img src='http://test.png'/>
</label>
</div>
</body>
</html>

参考

他4件のコメントを見る
id:Cherenkov

imgの親の兄弟の中から#labelIdにマッチするものを探してこいの命令です。
siblings()で全ての兄弟。siblings(条件)で絞れます。
#hogeはただのid属性を指定するcssセレクタの文字列です。
http://semooh.jp/jquery/api/traversing/siblings/expr/

2012/07/18 16:51:03
id:robopit

すっかり抜けていました。
わざわざ丁寧に教えてくださってありがとうございました

2012/07/18 17:02:13

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません