0

サイトに組み込む前に、星評価のテストを作成しています。私はそれが何回も行われており、無料のダウンロードがたくさんあることを知っています. 分かってる。私は JQuery を学ぼうとしているので、自分でやってみようと思いました。ここでラジオグループのjqueryの質問から、ラジオグループが隠された一連の画像を使用するというアイデアを得ました。どれがどれだったか覚えていません: (No stars you click on a pic with a pic with (NO STARS) and that is how it is registered. JQuery で何が間違っていたのでしょうか? これは星の評価を行う有効な方法ですか?

だからform.html：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="starrating.js"></script>
<style type="text/css">
.stars {
        visibility:hidden;
       }
 </style>
 <title>star rating</title>
 </head>

 <body>
 <form>
 <div id="starrating">
 <p>Star form example</p>
 <p>
         <label><img src="nostar.jpg" alt="no stars" id="star0" /></img>
            <input type="radio" name="rating" value="0" checked="checked" class="stars" id="rstar0"/>
         </label>
         <label><img src="staroff.jpg" alt="no stars" id="star1" /></img>
            <input type="radio" name="rating" value="1" visible="hidden" class="stars" id="rstar1"/>
         </label>
         <label><img src="staroff.jpg" alt="no stars" id="star2" /></img>
            <input type="radio" name="rating" value="2" visible="hidden"  class="stars" id="rstar2"/>
         </label>
         <label><img src="staroff.jpg" alt="no stars" id="star3" /></img>
            <input type="radio" name="rating" value="3" visible="hidden"  class="stars" id="rstar3"/>
         </label>
         <label><img src="staroff.jpg" alt="no stars" id="star4" /></img>
            <input type="radio" name="rating" value="4" visible="hidden"  class="stars" id="rstar4"/>
         </label>
         <label><img src="staroff.jpg" alt="no stars" id="star5" /></img>
            <input type="radio" name="rating" value="5" visible="hidden"  class="stars" id="rstar5"/>
         </label>
</p>
</div>
</form>
</body>
</html>

starrating.js:

function changestars()
{
    var num = ['0','1','2','3','4','5'];
    var img = '#star';
    var rst = '#rstar';
    for( var i=1;i<6;i++ )
    {
        var check = rst + num[i];
        var img1 = img + num[i];
        if( "input:radio[id='"+check+"']:checked" )
        {
             for( var j=i; j>0; j-- )
             {
                 var img2 = img + num[j];
                 $(img2).attr("src","staron.jpg");
             }
        }
        else
        {
             $(img1).attr("src","staroff.jpg");
        }
     }
}
document.ready(
    $('img').on('click',
    function()
    {
         var rad = 'r'+$(this).attr('id');
         $(rad).attr('checked','checked');
         changestars();
    })
);
4

1 に答える 1

1

より効率的なイベント処理:

変化する：

document.ready(
    $('img').on('click',
    function()
    {
         var rad = 'r'+$(this).attr('id');
         $(rad).attr('checked','checked');
         changestars();
    })
);

に：

$(function(){
  $("#starrating").on("click","img",changestars);
});

changestars を次のように変更します。

function changestars()
{
    var num = ['0','1','2','3','4','5'];
    var img = '#star';
    var rst = '#rstar';

    var rad = 'r'+$(this).attr('id');
    $(rad).attr('checked','checked');
于 2012-11-30T02:17:11.703 に答える