突出显示并删除单击 javascript 时突出显示 div

Question

我的 Rails 应用中有以下代码

<% @tasks.each do |t| %>
<div class="divs" data-slide-block-id="#task-drawer">
<div class="col-md-6 col-xs-3">
   <h5 class="pd0">
    <%= completed.nil? ? '' : '<i class="taskedit_completed_icon fa fa-check text-success icon mr-5"></i>'.html_safe %>
    <%= t["item"]%>
   </h5>
</div>
<div class="col-md-2 col-xs-3">
   <h5 class="pd0">
     <%= @stages.select{|s| s["id"] == t["stage_id"]}.map{ |s| s["name"] }.first || "n/a" %>
   </h5>
</div>
<div class="col-md-2 col-xs-3" style="margin-left:40px;">
   <h5 class="pd0" style="font-size: 18px; color: #337ab7; font-weight: bold;">
       &#x3e;
   </h5>
</div>
</div>
<% end %>

我想在单击 div 时突出显示它，并在再次单击它时取消突出显示。我有以下 javascript。

<style>
.color {
    background-color: yellow;
}
</style>

 <script>
   var addclasss = 'color';
   var $cols = $('.divs').click(function(e) {
       $cols.removeClass(addclasss);
       $(this).addClass(addclasss);
 });

 </script>

当我单击 div 时，它会突出显示，并且会显示任务抽屉。但是通过第二次单击我无法取消突出显示它但任务抽屉消失了。我必须再次单击才能取消突出显示。但是通过第三次单击再次显示任务抽屉。我想在任务抽屉消失时取消突出显示 div .我该如何解决这个问题？我附上了屏幕截图。

Answer 1

你可以使用.toggleClass('color'):

$(function() {
    $('#example').on('click', function() {
        $(this).toggleClass('color');
    });
});

#example {
    border: solid 1px black;
    padding: 20px;
}

.color {
    background: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="example">Hello World</div>