jQueryを活用して動きのあるページに!WEB PAGE CONTAINERの横幅修正方法

2013年06月11日

jQueryを活用して、
動的表現のあるクイズを作成してみる.

銀豚クイズページにて.

銀豚クイズ

クイズにはずれると、
「はずれ!」とPOP UP表示され、

当たると、、
銀豚クイズ2

↑「正解!」というPOP UP!

作成方法は・・・

head内に下記コードを入力

<meta charset="utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<title>クイズ</title>
<script>
$(function() {
  $('input').click(function() {
    if ($(this).val() == 2) alert('正解!');
    else alert('はずれ!');
  });
});
</script> 

さらに、
body内に下記コードを入力

<p>あなたの好きな食べ物は?</p>
  <p>
    <input type="radio" name="food" value="1">まつりぶんたろう
    <input type="radio" name="food" value="2">さいもんだろう
    <input type="radio" name="food" value="3">さいぶんたろう
  </p>

以上.

POINTは、下記コードで、

 if ($(this).val() == 2) alert('正解!');
    else alert('はずれ!');

「2」を選んだら、「正解!」とPOP UPされ、
それ以外を選んだら、「はずれ!」とPOP UPされるように
司令を出している. 


shun699 at 16:52│Comments(0)TrackBack(0) このエントリーをはてなブックマークに追加 IT:programing 

トラックバックURL

コメントする

名前
 
  絵文字
 
 
jQueryを活用して動きのあるページに!WEB PAGE CONTAINERの横幅修正方法