投票結果を jQuery で取得
#06 投票結果を取得してみよう
http://dotinstall.com/lessons/poll_php_v2/9706
を参考に
クリックされた画像のIDを取得するための処理をjQueryで実装
編集するのは index.php
の form タグの下あたりに
script タグで作成する
$(function(){
$(‘.candidate’).click(function(){
$(‘#answer’).val($(this).data(‘id’));
});
});
という処理になる
jQuery関連を勉強するとわかるけど
.candidate は
class=”candidate”
#answer は
id=”answer”
という意味
this はそのもの、というような意味
とりあえず、実働実験するので
input type=”hidden” だと見えないので
input type=”text” として値が取得できているか確認する
このままだと、写真をクリックしたときに
どれを選択したかわからないから
新しいクラスをつける
まず、CSSを設定する
head タグの中に
<style>
.selected {
border:4px solid red;
}
</style>
これで、選択した画像の回りに赤い線がでるようになる
この動作を jQuery で制御する
まず、すべての selected を外す
$(‘.candidate’).removeClass(‘selected’);
そして、選択したものに selected を追加する
$(this).addClass(‘selected’);
これで、再度読み込んでみると
選択した写真の回りに赤い線がでるようになり
わかりやすくなる
ここまでできたら、
<input type=”text” id=”answer” name=”answer” value=””>
から
<input type=”hidden” id=”answer” name=”answer” value=””>
へ戻す