jquery - 添加和删除hightlight

Question

我有一些图标。我希望能够通过点击它们来选择它们的数量。如果我再次点击，我想删除复选框标记和突出显示图像的类。

下面的代码允许选中图像，并将值添加到相关复选框。如何在用户再次点击图片时将其删除？

<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

只需卸下类第一然后将其添加到选定的一个。

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