CODEWITHSUNDEEP
javascriptjqueryhtml
jason dancks
jason dancks

Reputation: 1142

JQuery can't get star rating form to work

Before I build it into my site, I am making a test star rating thing. I know Its been done tons of times and there are a lot of free downloads. I know, I know. I'm trying to learn JQuery so I thought I would attempt it myself. I got the idea to use a series of images with hidden radio group from a radio group jquery question on here. I don't remember which one: (No stars you click on a pic with the words (NO STARS) and thats how its registered. What did I do wrong with the JQuery? Is this a valid method of doing a star rating?

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

Upvotes: 0

Views: 350

Answers (1)

Joe Johnson
Joe Johnson

Reputation: 1824

More efficient event handling:

Change:

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

to:

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

and modify changestars to:

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

Upvotes: 1

Related Questions