jquery - hinzufügen und entfernen hightlight

Question

Ich habe die Anzahl der Symbole. Ich möchte in der Lage sein, eine Anzahl von ihnen auszuwählen, indem ich darauf klicke. Wenn ich noch einmal klicke, möchte ich das Kontrollkästchen und die Klasse entfernen, die das Bild hervorheben.

Der unten stehende Code ermöglicht es, das ausgewählte Bild aufzuhellen und dem entsprechenden Kontrollkästchen einen Wert hinzuzufügen. Wie entferne ich sie, wenn der Benutzer erneut auf das Bild klickt?

<span id="tripType"> 
    <i class="fa fa-user fa-4x tripType" id="1"></i> 
    <input type="hidden" name="tripTypes[]" value='' id="tripTypeField1"> 

    <i class="fa fa-system fa-4x tripType" id="2"></i> 
    <input type="hidden" name="tripTypes[]" value='' id="tripTypeField2"> 

    <i class="fa fa-phone fa-4x tripType" id="3"></i> 
    <input type="hidden" name="tripTypes[]" value='' id="tripTypeField3"> 
</span> 

JS:

<script> 
    $(".tripType").click (function() { 
     var obj = this; 
     $(obj).addClass('border-highlight'); 

     chosenID = $(obj).attr("id"); 

     $("#tripTypeField" + chosenID).val(chosenID); 
    }); 

</script> 

Answer 1

einfach die Klasse entfernen Sie zuerst es dann zu dem ausgewählten hinzuzufügen.

$(".tripType").click (function() {   
    $(".border-highlight").removeClass('border-highlight'); 
    $(this).addClass('border-highlight'); 
    chosenID = $(this).attr("id"); 
    $("#tripTypeField" + chosenID).val(chosenID); 
});