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

Question

robopit

35

32もっと見る

100pt

ウェブ制作学習・教育

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

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

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

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

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

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

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

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

回答の条件

1人5回まで

登録：2012/07/18 12:44:30
終了：2012/07/18 14:07:35

※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。

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

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

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

リクエスト送信済

回答リクエストを送信したユーザーはいません

Cherenkov · Accepted Answer · 2012-07-18T13:43:27+09:00

画像を押してもチェックする機能は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>

参考

label - ラベル

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

ベストアンサー

Cherenkov15044932012/07/18 13:43:27

コメント（0件)

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