toggleClass并从所有其他元素中删除类

如何切换类和从所有其他元素中删除类？ 考虑一个包含标签的div：html：

 blahblah blahblah  

jQuery的：

  $(".size a").click(function(){ $(this).toggleClass('checked'); if($(".size a").hasClass('checked')){ $(this).removeClass('checked'); } }) 

我想在元素中添加“cheched”类，并从具有“已检查”类的其他元素中删除“ckeched”类。 我的代码删除所有类。 如何添加特定类并通过单击删除其他元素的类？ 提前致谢

Answer 1

这样做

  $(".size a").click(function(){ $('.size a.checked').not(this).removeClass('checked'); $(this).toggleClass('checked'); }) 

---

更新

或者你可以做到

  $(".size").on('click','a', function(){ $(this).toggleClass('checked').siblings().removeClass('checked'); }) 

Answer 2

只有你需要使用它。 🙂

Answer 3

这么晚，但我的回答

$(".size").click(function(){ $('.size').removeClass('checked') //Clear all checked class on .size $(this).addClass('checked') //Add checked class to current clicked .size })

它更干净，更强大，更安全。

Answer 4

我假设你有一个类“大小”，其中包含许多元素，其中只有一个元素应该能够在任何时候“检查”类。

 $(".size a").click(function() { if($this).hasClass('checked') { $(".size a").removeClass('checked'); $(this).addClass('checked'); } else { $(this).removeClass('checked'); } } 

Answer 5

          
 
This is main Heading
 
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like). 
 
 
 
This is main Heading
 
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like). 
 
 
 
This is main Heading
 
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like). 
 
   

CSS

 .main { width:300px; margin:30px; margin:20px 25px; text-align:center; background-color:#CCC; padding:20px; display:inline-block; } .main:hover { cursor:pointer; } .main1 { width:300px; margin:30px; margin:20px 25px; text-align:center; background-color:#CCC; padding:20px; border:3px solid #036; } 

Answer 6

 $('.size a').on('click', function (e) { e.preventDefault(); $(this).removeClass("checked"); $(this).slideToggle(); $(this).toggleClass('checked').removeClass('checked'); });