人力検索はてな
ﾓﾊﾞｲﾙ版を表示しています｡PC版はこちら
i-mobile
JQUERYでの連続処理に関しての質問です｡


ﾁｪｯｸﾎﾞｯｸｽに画像を押してもﾁｪｯｸできる機能と

ｸﾘｯｸした後でその画像を差し替える機能を作ったのですが

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

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

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

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

また､なぜ個別に書くといけないのかも教えていただければありがたいです｡
●質問者: robopit
●ｶﾃｺﾞﾘ:ｳｪﾌﾞ制作 学習･教育
○ 状態 :終了
└ 回答数 : 1/1件
▽最新の回答へ
▽1 ● Cherenkov
●100ﾎﾟｲﾝﾄ ﾍﾞｽﾄｱﾝｻｰ

画像を押してもﾁｪｯｸする機能は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>

参考

Cherenkovさんのｺﾒﾝﾄ
IE9より下はlabel imgをｸﾘｯｸしても反応しないんですね…
robopitさんのｺﾒﾝﾄ
一応自力でできたんですが(ｾﾚｸﾀの指定ﾐｽでした)､動作がちょっと不安定だったので参考にして作り直したいと思います｡ ありがとうございました
Cherenkovさんのｺﾒﾝﾄ
あ､そうでしたか…｡元に忠実にして､IE8とかでも動くように書きなおしてみたのですが >|html| <!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() { $('label img').toggle(function() { var labelId = $(this).parent().attr('for'); var chkBox = $(this).parent().siblings('#'+labelId); chkBox.attr('checked', true); var onSrc = $(this).attr('src').replace('.png', 'kakikae.png'); $(this).attr('src', onSrc); }, function() { var labelId = $(this).parent().attr('for'); var chkBox = $(this).parent().siblings('#'+labelId); chkBox.removeAttr('checked'); var onSrc = $(this).attr('src').replace('kakikae.png', '.png'); $(this).attr('src', onSrc); }) }); </script> </head> <body> <div> <input type='checkbox' name='ck2' id='radio1' > <label for='radio1' > <img src='a.png'/> </label> <input type='checkbox' name='ck2' id='radio2' > <label for='radio2' > <img src='a.png'/> </label> </div> </body> </html> ||<
robopitさんのｺﾒﾝﾄ
ありがとうございます｡ 一つお聞きしたいのですが var chkBox = $(this).parent().siblings('#'+labelId); の部分の '#' はどういう意味なんでしょうか？
Cherenkovさんのｺﾒﾝﾄ
imgの親の兄弟の中から#labelIdにﾏｯﾁするものを探してこいの命令です｡ siblings()で全ての兄弟｡siblings(条件)で絞れます｡ #hogeはただのid属性を指定するcssｾﾚｸﾀの文字列です｡ http://semooh.jp/jquery/api/traversing/siblings/expr/
robopitさんのｺﾒﾝﾄ
すっかり抜けていました｡ わざわざ丁寧に教えてくださってありがとうございました
関連質問
●質問をもっと探す●

0.人力検索はてなﾄｯﾌﾟ
8.このﾍﾟｰｼﾞを友達に紹介
9.このﾍﾟｰｼﾞの先頭へ
□対応機種一覧
□お問い合わせ
□ﾍﾙﾌﾟ/お知らせ
□ﾛｸﾞｲﾝ
□無料ﾕｰｻﾞｰ登録
□はてなﾄｯﾌﾟ