能夠在html中選擇和取消選擇多個元素並跟蹤已選擇的內容

Question

根據後端，我的HTML模板將被添加多次。所以，我想選擇主題併發送所選元素的ID。怎麼做？ 現在我只能選擇，之後我也無法取消選擇它。 幫助!!

我的jQuery代碼選擇：

$(document.body).click(function(evt){ 
    var clicked = evt.target; 
    var currentID = clicked.id || "No ID!"; 

    document.getElementById(currentID).style.backgroundColor = "#00afbc"; 
    //$(clicked).html(currentID); 
}) 

我的HTML代碼：

<div class="container-fluid" id="container-<%=no%>"> 

    <div id="circle" style="background:<%= colorCode %>;" class="col-xs-3"> 
     <div class="text" style="color:<%= textColor %>;"> 
      <%=p ercent %> 
     </div> 
     <div class="percent" style="color:<%= textColor %>;">%</div> 
    </div> 

    <div id="sideText"> 
     <div class="checkbox col-xs-9 everything-checkbox"> 
      <!--input type="checkbox" class="toggle" /--> 
      <div id="currentID"> 
       <%=currentID %> 
      </div> 

      <div id="question"> 
       <%=t otalQues %> Questions Attempts 
      </div> 

     </div> 
    </div> 

</div> 
<hr style="width: 100%; color: #d9d9d9; height: 1px; background-color:#d9d9d9; margin-top:0px;margin-bottom:0px;" /> 

Answer 1

你可以只添加和刪除一個類來跟蹤選定的項目，然後就獲得所有被選中具有ID的項目

$(document).ready(function() { 
    $(document.body).click(function (evt) { 
     var clicked = evt.target; 
     if (!$(clicked).hasClass('selected')) { 
      $(clicked).addClass('selected'); 
      $(clicked).css('background-color', '#00afbc'); 
     } else { 
      $(clicked).removeClass('selected'); 
      $(clicked).css('background-color', ''); 
     } 
    }); 
}); 

function getSelected() { 
    var ids = []; 
    $('.selected').each(function() { 
     var id = $(this).attr('id'); 
     if (id) { 
      ids.push($(this).attr('id')); 
     } 
    }); 
    return ids; 
}