Question

在我将它构建到我的网站之前，我正在制作一个测试星评级的东西。我知道它已经完成了很多次，并且有很多免费下载。我知道我知道。我正在努力学习JQuery，所以我想我会自己尝试一下。我有想法在这里使用来自无线电组jquery问题的隐藏无线电组的一系列图像。我不记得是哪一个:(没有明星你点击图片上的文字（没有明星），那就是它的注册方式。我对JQuery做错了什么？这是一个有效的星级评定方法吗？ / p>

所以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();
    })
);

Answer 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');

JQuery无法获得星级评级表格

1 个答案: