2012/06/11(月) [n年前の日記]
#2 [javascript] jQueryをちょっとだけ勉強
前述のサンプルページを書く際に、radioボタンを押したら背景色が変わるようにしたくて、ちょっとだけ勉強。というか解説記事からコピペ。忘れそうなのでメモ。
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script type="text/javascript"> <!-- $(function(){ $("[name='bg']").click(function(){ $("td.img").css("background-color", $("input[name='bg']:checked").val()); }); }); --> </script>
<form> <p>画像背景色を変更</p> <INPUT type="radio" name="bg" value="#000000" checked>黒 <INPUT type="radio" name="bg" value="#ffffff">白 <INPUT type="radio" name="bg" value="#ff0000">赤 </form>
<tr><td class="img"><img src="src.png"></td><td>元画像(アルファチャンネル付きpng)</td></tr>name="bg" が指定されたhtmlタグ(この場合はradioボタン)に、クリックされたときに呼ばれる関数?を割り当てる。関数の中では、img というクラス名が付いた td の背景色を、cssを使って変化させる。変化させる値は、チェックがついたradioボタンのvalueを使う。ということだと思うけど、ちと自信無し。
[ ツッコむ ]
以上です。