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

【问题标题】：toggleClass and remove class from all other elementstoggleClass 并从所有其他元素中删除类
【发布时间】：2011-02-20 13:04:54
【问题描述】：

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

<div class="size">
   <a href="">blahblah</a>
   <a href="">blahblah</a>
</div>

jQuery:

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

我想向元素添加类 "cheched" 并从其他具有类 "checked" 的元素中删除类 "ckeched" 。我的代码删除了所有类。如何通过单击添加特定类并删除其他元素的类？提前致谢

【问题讨论】：

你能澄清你的问题吗？完全不清楚您要寻找什么最终结果...
有没有人可以在没有 jquery 的情况下解决这个问题？（我不能使用 jquery :( 不要问为什么）。

标签： jquery

【解决方案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');
 })

【讨论】：

+1 为我提供了这个答案！第二种方法很有效！

【解决方案2】：

只有你需要使用它。 :)

<script>
    $(document).ready(function () {
        $('.demo_class').click(function () {
            $(this).toggleClass('active').siblings().removeClass('active');
        });
    });
</script>

【讨论】：

【解决方案3】：

这么晚了，但这是我的答案

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

它更清洁、功能强大且安全。

【讨论】：

【解决方案4】：

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

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

【讨论】：

函数缺少右括号。

【解决方案5】：

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>On click Change Css</title>
    <link rel="stylesheet" href="css/style.css" >
    <script src="js/jquery-1.11.3.min.js" type="text/javascript"></script>
    <script>
        $(document).ready(function(){
            $('.main').click(function(){
                $(this).toggleClass('main1').siblings().removeClass('main1');;
             });
        });
    </script>

</head>

<body>

    <center>
        <div class="main" id="main-box">
            <h2>This is main Heading</h2>
            <p>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).
            </p>
        </div>
        <div class="main">
            <h2>This is main Heading</h2>
            <p>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).
            </p>
        </div>
        <div class="main">
            <h2>This is main Heading</h2>
            <p>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).
            </p>
        </div>
    </center>

</body>

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;
}

【讨论】：

您能否补充几句关于这段代码的作用以及它如何解决所提出的问题？

【解决方案6】：

$('.size a').on('click', function (e) {     
                    e.preventDefault();

                    $(this).removeClass("checked");
                    $(this).slideToggle();  
                 $(this).toggleClass('checked').removeClass('checked');

                });

【讨论】：

请提供一些关于此解决方案如何以及为何解决问题的推理。纯代码解决方案对想要学习的用户没有太大帮助