FC2ブログ

投票結果を 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="">
へ戻す
スポンサーサイト



テーマ : プログラミング
ジャンル : コンピュータ

コメント

非公開コメント

最新記事
検索フォーム
GREEハコニワ攻略サイト
リンク
カテゴリ
月別アーカイブ
フリーエリア
最新記事
FXプライムレート
最新コメント
最新トラックバック