javascript - Changing image on click of text -
i'm having problems getting different image display on click of text. have red button on click of text should change green button, way have set doesn't work. appreciated. below code:
<script> $(document).ready(function() { $(".note").click(function(){ // 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 in page
<? if(!empty($notes)): foreach($notes $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; ?>
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 jquery:
$("#note_indicator_"+note_num).this.src='images/buttons/green_icon.png';
by:
$(".note_indicator").attr("src","images/buttons/green_icon.png");
i think want do.
Comments
Post a Comment