如何使用 jQuery 添加类？答案

【问题标题】：How to add class using jQuery?如何使用 jQuery 添加类？
【发布时间】：2012-05-28 23:01:32
【问题描述】：

我创建了一个小函数，当我们点击 li> 时，它的工作是在 <li> 中添加类，但如果 <li> 已经有它，我想删除它。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="generator" content="CoffeeCup HTML Editor (www.coffeecup.com)">
    <meta name="created" content="Tue, 22 May 2012 12:39:23 GMT">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <title></title>

    <style type="text/css">
    <!--
    body {
      color:#000000;
      background-color:#FFFFFF;
    }
    a  { color:#0000FF; }
    a:visited { color:#800080; }
    a:hover { color:#008000; }
    a:active { color:#FF0000; }
    -->
    </style>

    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>

    <script type="text/javascript">

    $(function(){

    $('.main').find('li').each(function(){

    $(this).live('click', function (){

    $(this).addClass('active')

    })

    })

    })

    </script>

  </head>
  <body>

  <ul class="main">
  <li>first</li>

  <li>second</li>
    <li>third</li>
      <li>fourth</li>  

  </ul>

  </body>
</html>

【问题讨论】：

标签： jquery css

【解决方案1】：

您可以只使用toggleClass 这将根据需要添加或删除它

$('.main li').live('click',function(){
  $(this).toggleClass('active');
});

如果你想从其他地方移除这个类，你可以多加一行：

$('.main li').live('click',function(){
  $('.main li.active').removeClass('active')
  $(this).addClass('active');
});

【讨论】：

【解决方案2】：

使用jquery函数.toggleClass。

$('.main li').click( function(){
  $(this).toggleClass('active');
});

这应该可以解决问题；） http://api.jquery.com/toggleClass/

【讨论】：

当我们单击第一个 li 时，它正在添加活动的类现在我想要如果我们单击第二个 li 那么应该删除第一个 li 类
按照 Jamiec 的建议，您可以添加 $('.main li.active').removeClass('active')

【解决方案3】：

我们可以更好地使用 .on() 或 .delgate() 方法：

不再推荐使用 .live() 方法，因为后来的jQuery 版本提供了没有缺点的更好的方法。特别是，使用 .live()会出现以下问题：

https://api.jquery.com/live/

$('#showDiv').on('click',function(){
  $(this).toggleClass('active');
});

【讨论】：

【解决方案4】：

这将工作尝试...

$("#button").click(function(){

 $(".addclass").addClass("add");



})

$("#button2").click(function(){

 $(".addclass").removeClass("add");

})

.add{
color:red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<p class="addclass">Sample text to add class on it</p>
<button id="button">Add Class</button>
<button id="button2">Remove Class</button>

【讨论】：