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