Changing image on click of text

Question

I'm having some problems getting a different image to display on click of some text. I have a red button which on click of the text should change to a green button, but the way I have it set up it doesn't work. Any help would be appreciated. Below is my code:

<script>
$(document).ready(function() {
$(".note").click(function(){    
    // get the search values
    var id = $(this).attr('id')
    var id_array = id.split('_')
    var note_num = id_array[1]

    if($(this).hasClass('hide'))
    {
        $(this).removeClass('hide').addClass('show')
        $("#note_details_"+note_num).slideDown()

        if($(this).hasClass('new_note')){
            $(this).removeClass('new_note')
            $("#note_indicator_"+note_num).this.src='images/buttons/green_icon.png';
        }
    }
    else
    {
        $(this).removeClass('show').addClass('hide')
        $("#note_details_"+note_num).slideUp()
    }

})

 });
</script>

This is in my page

<?
    if(!empty($notes)):
        foreach($notes as $note):
    ?>
    <div id="hdr_active">
     <input type="checkbox"/></label>
     <div style='display:inline-block;' id='note_<?=$note->note_id?>' class="note new_note hide"><span id='note_indicator_<?=$note->note_id?>'><img src="images/buttons/red_icon.png" class="note_indicator" width="6" height="6" /></span><?=$note->title?></div>
     <div id='note_details_<?=$note->note_id?>' class="details" style="display: none">
     <p><?=$note->details?></p>
     </div>
    </div>
    <?
        endforeach;
    endif;
    ?>

Answer 1

Replace:

<div style='display:inline-block;' id='note_<?=$note->note_id?>' class="note new_note hide"><span id='note_indicator_<?=$note->note_id?>'><img src="images/buttons/red_icon.png" class="note_indicator" width="6" height="6" /></span><?=$note->title?></div>

by:

    <div style='display:inline-block;' id='note_<?=$note->note_id?>' class="note new_note hide"><img src="images/buttons/red_icon.png" id='note_indicator_<?=$note->note_id?>' width="6" height="6" /
   <?=$note->title?>
   </div>

then replace in your jquery:

$("#note_indicator_"+note_num).this.src='images/buttons/green_icon.png';

by:

$(".note_indicator").attr("src","images/buttons/green_icon.png");

I think this is what you want to do.

Answer 2

Here is your code, you are mistaking ids, also the split element you need is the second. jsfiddle.net/RLJFL/4/

I can't make a comment but your solutions wont work. Because this code

var id_array = id.split('_')
var note_num = id_array[1]

id_array[1] - will get indecator, you must change it to id_array[2] in order to get the proper note_num