Question

我在点击某些文字时显示不同的图片时出现问题。我有一个红色按钮，单击文本时应该更改为绿色按钮，但我设置它的方式不起作用。任何帮助，将不胜感激。以下是我的代码：

<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>

这是在我的页面

<?
    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

替换：

<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 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>

然后在你的jquery中替换：

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

by：

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

我认为这就是你想要做的。

Answer 2

这是你的代码，你是错误的id，你需要的分裂元素是第二个。 jsfiddle.net/RLJFL/4 /

我无法发表评论，但您的解决方案无法解决。因为这段代码

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

id_array [1] - 将获得默认值，您必须将其更改为id_array [2]才能获得正确的note_num

单击文本更改图像

2 个答案: