Question

I’ve got a jQuery star rating that works perfectly with jQuery 1.7.2 but returns a syntax error when using jQuery 1.8.0. Here’s the script:

/* ====== STAR RATING ========= */
    jQuery(".stars.active a.star").hover(
        function(){
            var elemID = jQuery(this).parent('.stars').attr('id');
            elemID = elemID.replace('id-', '');

            if (od_readCookie('voted-'+elemID) == 'TRUE') {
                jQuery(this).siblings('.ty').html('You already voted.');
            } else {    

                var theClass = jQuery(this).attr('class');
                theClass = theClass.match(/^s[0-9]/);
                var starNum = theClass[0].replace('s', '');
                var allClasses = '';
                for(i=1;i<=starNum;i++) {
                    allClasses += ' .s'+i+', ';
                }
                jQuery(this).parent('.stars').children('.star').addClass('nogold');         
                jQuery(this).parent('.stars').children(allClasses).addClass('hover');
            }
        },
        function(){
            var elemID = jQuery(this).parent('.stars').attr('id');
            elemID = elemID.replace('id-', '');

            if (od_readCookie('voted-'+elemID) == 'TRUE') {
                jQuery(this).siblings('.ty').html('');
            } else {            
                jQuery(this).parent('.stars').children('.star').removeClass('nogold');                  
                jQuery(this).parent('.stars').children('.star').removeClass('hover');
            }
        }
    );

    // actually add the rating
    jQuery(".stars.active a.star").click(function(){
        var elemID = jQuery(this).parent('.stars').attr('id');
        elemID = elemID.replace('id-', ''); 

        if (od_readCookie('voted-'+elemID) != 'TRUE') {

            var theClass = jQuery(this).attr('class');
            theClass = theClass.match(/^s[0-9]/);
            var starNum = theClass[0].replace('s', '');


            // keep the marking while rating updating
            var allClasses = '';
            for(i=1;i<=starNum;i++) {
                allClasses += ' .s'+i+', ';
            }
            jQuery(this).parent('.stars').children('.star').addClass('nogold_voted');           
            jQuery(this).parent('.stars').children(allClasses).addClass('hover_voted');

            jQuery(this).siblings('.ty').load('/od/wp-admin/admin-ajax.php?action=od_add_vote&id='+elemID+'&rating='+starNum);
        }

    });

I’m not affluent with jQuery, so can anyone shed a bit of light and what exactly is causing the problem?

Answer 1

Okay, I think I found it. This code is causing problems:

var allClasses = '';
for(i=1;i<=starNum;i++) {
   allClasses += ' .s'+i+', ';
}
jQuery(this).parent('.stars').children('.star').addClass('nogold');         
jQuery(this).parent('.stars').children(allClasses).addClass('hover');

And this

var allClasses = '';
for(i=1;i<=starNum;i++) {
    allClasses += ' .s'+i+', ';
}
jQuery(this).parent('.stars').children('.star').addClass('nogold_voted');           
jQuery(this).parent('.stars').children(allClasses).addClass('hover_voted');

In both cases allClasses variable ends with a comma at the end, so the final selector is something like .s0.s1,.s2,s3,s4, what is acceptable in jQuery 1.7, but doesn’t work in 1.8+.

So the solution is to remove last comma from the variable: allClasses = allClasses.slice(0, -1) after each loop.

So you should end up with something like this:

var allClasses = '';
for(i=1;i<=starNum;i++) {
   allClasses += ' .s'+i+', ';
}
allClasses = allClasses.slice(0, -1);

jQuery(this).parent('.stars').children('.star').addClass('nogold');         
jQuery(this).parent('.stars').children(allClasses).addClass('hover');

AND

var allClasses = '';
for(i=1;i<=starNum;i++) {
    allClasses += ' .s'+i+', ';
}
allClasses = allClasses.slice(0, -1);

jQuery(this).parent('.stars').children('.star').addClass('nogold_voted');           
jQuery(this).parent('.stars').children(allClasses).addClass('hover_voted');