如何在jQuery中删除以前的活动类

Question

我是一个列表，单击时会在列表中切换active类，但是当我单击其他元素时，先前的元素仍包含active类

<ul>
    <li class="click_me">Here </li>
    <li class="click_me">Here </li>
    <li class="click_me">Here </li>
    <li class="click_me">Here </li>
</ul>

$(document).ready(function()
{
    $('.click_me').click(function()
    {
        $.each(function()
        {
            $('.click_me').toggleClass('active');
        });
        $(this).toggleClass('active');
    });
});

<style>
.active
{
    background-color: red;
}
</style>

我想要的是，当我单击其他li元素时，必须切换出li的active类。 对不起，英语不好！ 我试图添加每个循环，但没有成功。

Answer 1

为了.active起作用，您只需要从所有已有的.active类中删除它即可，但当前元素除外，应将其切换。 尝试这个：

 $('.click_me').click(function() { $('.active').not(this).removeClass('active'); $(this).toggleClass('active'); }); 

 .active { background-color: red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul> <li class="click_me">Here</li> <li class="click_me">Here</li> <li class="click_me">Here</li> <li class="click_me">Here</li> </ul> 

Answer 2

正确的方法是使用事件委托 ：

 $('ul').on('click', '.click_me', function(){ $(this).toggleClass('active').siblings().removeClass('active'); // <--- The trick! }) 

 .active{ background:lightblue; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul> <li class="click_me active">Click here</li> <li class="click_me">Click here</li> <li class="click_me">Click here</li> <li class="click_me">Click here</li> </ul> 

那应该做！

Answer 3

$('.click_me').click(function()
{
    // remove the .active class from all the .active elements.
    $('.click_me.active').removeClass('active');
    // add it to this one
    $(this).addClass('active');
});

Answer 4

尝试这个。

从所有li元素（不包括clicked元素）中删除该类，并在clicked元素上切换类。

 $(document).ready(function() { $('.click_me').click(function() { $("li.active").not(this).removeClass('active'); $(this).toggleClass("active"); }); }); 

 .active { background-color: red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul> <li class="click_me">Here </li> <li class="click_me">Here </li> <li class="click_me">Here </li> <li class="click_me">Here </li> </ul> 

Answer 5

尝试这个。 它应该工作！ 所有答案都起作用！

$('.click_me').click(function()
{
    $('.click_me.active').removeClass('active');
    $(this).addClass('active');
});