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点击代替.selected。尝试以下。

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

UPDATED FIDDLE

Answer 2

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


 $(document).on('click', '.container', function() {
      $(this).toggleClass('selected');
    })

将您选择的'div'类名称更改为'容器'或您想要的watever。为那些拥有'容器'的div或者你为tat div提供的任何名称添加点击监听器

Answer 3

您可以通过添加额外的类来使这更简单。见fiddle。错误是所选类被删除。这意味着您的点击事件也会被删除。使用2个类可以解决这个问题。

<强>的Javascript

$(document).on('click', '.item', function() {
   $('.item').removeClass('selected');
   $(this).addClass('selected'); //add class to the clicked control
});

<强> HTML

<div id="resource">
   <div class="item">test</div>
   <div class="item">test</div>
</div>

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

3 个答案:

UPDATED FIDDLE