jQuery auf Klick verhält sich anders

Question

Ich erzeuge HTML-Elemente nach einer Bedingung, die ich von Server-Antwort erhalten.

@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 

und einige eher wie dieses mit dem gleichen inneren wenn die Bedingungen

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

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

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

Die on click Funktion funktioniert nur auf Elemente, die aufgefüllt werden, wenn „neue“ condtion erfüllt ist.

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

und funktioniert nicht auf anderen Elementen, die von anderen Bedingungen ausgefüllt werden. Aber wenn ich einen Kommentar von new Bedingung. Eine andere Bedingung wie "gut" oder "schlecht" oder "geplant" funktioniert.

$(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); 
    } 
}); 

}); 

Ich verstehe das Problem nicht dahinter, obwohl alle die ID geklickt gleich sind.

Answer 1

Eine HTML-ID ist eindeutig. Sie sollten ein Klassenattribut verwenden. Ändern Sie die ID nach Klasse und ändern Sie in Ihrer JQuery #id durch .class.

.attr (Attributname, Wert) wird verwendet, um den Attributwert festzulegen und sie nicht zu testen. Verwenden Sie .attr (attributeName) === 'value' Sie können auch das Attribut daten- * für eine sichere Lösung zu diesem Test hinzufügen.

Answer 2

Sie müssen class für HTML-Elemente verwenden, die mehrfach vorkommen können, weil id s immer eindeutig für HTML-Elemente sind. In Klasse und ändern Sie den Code wie unten

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

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

Answer 3

Ich denke, entweder Sie sollten die verschiedenen IDs zu den Elementen geben, je nach ihrem Status oder sollten Sie sie nennen ihre Klassennamen verwenden.