javascript - 如何删除单击控件上的特定类？

Question

我试图删除点击控件上的特定类，特别是我有这个 html 结构:

<div id="resource">
   <div class="selected"></div>
   <div class="selected"></div>
</div>

这是我的代码:

$(document).on('click', '.selected', function() {
if ($(this).hasClass('selected')) {
  $(this).removeClass('selected'); //remove the specific class
} else
{
  $('#resource .selected').removeClass('selected'); //remove class of all control
$(this).addClass('selected'); //add class to the clicked control
}
});

这是 css 类:

.selected {
 background-color: red;
}

您如何查看我是否单击了一个 div，该类是否已正确添加，但是如果我已经设置了一个带有 .selected 类的 div，然后单击没有此类的 div，则代码不会' 删除其他 div 的类。为什么？？

这是 jsfiddle .

Answer 1

您的点击事件仅适用于 .selected 类。您应该使用 #resource div click 而不是 .selected。尝试如下。

$(document).on('click', '#resource div', function() {
   if ($(this).hasClass('selected')) {
       $(this).removeClass('selected');
   } else
   {
      $('#resource .selected').removeClass('selected'); 
      $(this).addClass('selected');
   }
});

UPDATED FIDDLE