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

How to remove a specific class on the clicked control?

本文关键字：控件 单击 何删除 删除      更新时间：2023-09-26

我正试图删除被点击控件上的一个特定类，特别是我有这样的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的类。为什么？？

这是小提琴。

您的点击事件仅适用于.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');
   }
});

更新的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>

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

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

将ur的"selected"div类名更改为"container"或您想要的任何名称。为那些具有"container"或您为tatdiv 指定的任何名称的div添加click listener

相关文章：