0

在我将它构建到我的网站之前，我正在做一个测试星级的东西。我知道它已经完成了很多次，并且有很多免费下载。我知道我知道。我正在尝试学习 JQuery，所以我想我会自己尝试。我得到了使用一系列图像的想法，该图像来自此处的广播组 jquery 问题中的隐藏广播组。我不记得是哪一个：（没有星星，你点击带有单词（NO STARS）的图片，这就是它的注册方式。我在 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>

星级.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 回答