Question

I’m having issues with jQuery selectors (again). I’m sure this is really simple but I seem to be strugling.

This is the selector that’s causing me problems. The variables ClassImg and TitleImg all seem to be ok.

$('img [class=' + ClassImg + '][attr="1"][title=' + TitleImg + ']').attr("src", "../graphics/stars/FullStar.png");

I’ve been fiddling about with it here: http://jsfiddle.net/PottyMonster/aYr8e/

Thanks in advance for your help.

Dan

Answer 1

Some helpful notes:

1. You can use img.' + ClassImg the class selector instead of the [attr] selector for class names.
2. I assume you mean alt=1
3. Since you are using jquery look at using .hover() as it will help produce less Unobtrusive javascript.
4. If you use Unobtrusive javascript wrap your event handlers in $(document).ready(function(){}); or simply $(function(){});

From looking at what your example it appears like you want to highlight the stars on hover.
Since you have the stars under a <p> tag you can call parent on the <img> and than use the :lt() selector to select the <img/> stars less than the current star you are hovering over. Putting this all together ends up with something like the following:

$("img").hover(function() {
    var AltImg = $(this).attr("alt");
    $(this).parent().children(":lt(" + AltImg + ")").attr("src", "http://www.sweetashoney.co.uk/graphics/stars/FullStar.png");
},
function() {
    $('img[name=FeedbackStar]').attr("src", "http://www.sweetashoney.co.uk/graphics/stars/EmptyStar.png");
});

Example on jsfiddle.

Hope this helps! If I missed the mark let me know and I will revisit.