changing the image in jquery?

Question

i have this jquery code which works fine, but the image at the end is not changing to the src i specified here:

jquery:

    $(document).ready( function() {
      $("a.vote_up").click(function(){
        //get the id
        var the_id = $(this).attr('id');

        //the main ajax request
        $.ajax( {
          type: "POST",
          data: "action=vote_up&id=" + the_id,
          url: "ajax/votes.php",
          success: function( msg ) {
            $("span.vote_count#"+the_id).html(msg).fadeIn();
// my problem is here 
            $(".vote_up#" + the_id + " img").attr("src", "img/upvoteActive.png");
          }
        } );
      } );
    } );

the html code:

<a href='#' class='vote_up' id="$id"><img src="img/uparrow.png" /></a>

Answer 1

Don't use class in combination with ID; it is redundant because ID should always be unique...

 $("#" + the_id + " img").attr("src", "img/upvoteActive.png");

Also, you cannot use the character $ in the ID attribute. To quote the W3C on the ID attribute...

ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

Answer 2

It looks like you are using the same ID multiple times (img and count). Try making the ID more unique like:

<a href='#' class='vote_up' id="$id_link"><img src="img/uparrow.png" /></a>
<span class="vote_count" id="$id_count"></span>