Javascript 单击jQuery的行为不同

我根据从服务器响应收到的某些条件生成html元素

@if($candidate->status == "new")
   @if($candidate->priority == "")
   <a id = "prioritize" data-value = "{{$candidate->id}}" ><img id = "priority" src="icons/non_priority.png"></img></a>
   @else if($candidate->priority == "yes")
   <a id = "prioritize" data-value = "{{$candidate->id}}" ><img id = "priority" src="icons/priority.png"></img></a>
   @endif 
@endif

单击时的

功能仅适用于满足“新建”条件时填充的元素

@if($candidate->status == "new")
@endif

并且不适用于由其他条件填充的其他元素。但是当我评论

新的
条件时。其他一些条件，如“好的”或“坏的”或“计划的”有效

我不理解这背后的问题，尽管所有单击的id都是相同的。
html id是唯一的。您应该使用一个类属性。
按类更改id，并在jquery中按.class更改#id

.attr（attributeName，value）用于设置属性值，而不是测试她。
Use.attr（attributeName）='value'
您还可以将data-*属性添加到此测试，以获得更可靠的解决方案
 对于可能多次出现的html元素，必须使用
class
，因为
id
s对于html元素总是唯一的。添加类并更改代码，如下所示

$('.favorite').on('click',function(){
if ($(this).find('img').attr('src','icons/non_star.png')) {

        var candidate_id = $(this).data('value');
        alert(candidate_id);
}
  });

我认为要么根据元素的状态为它们指定不同的ID，要么使用它们的类名调用它们

$(document).ready(function(){

$('#favorite').on('click',function(){
    if ($(this).find('img').attr('src','icons/non_star.png')) {

            var candidate_id = $(this).data('value');
            alert(candidate_id);
    }
});

$('#prioritize').on('click',function(){
    if ($(this).find('img').attr('src','icons/non_priority.png')) {

            var candidate_id = $(this).data('value');
            alert(candidate_id);
    }
});

});

$('.favorite').on('click',function(){
if ($(this).find('img').attr('src','icons/non_star.png')) {

        var candidate_id = $(this).data('value');
        alert(candidate_id);
}
  });