如何在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的{​​{1}}类。抱歉英文不好！ 我尝试添加每个循环，但它不起作用。

Answer 1

要实现此功能，您只需要从已经拥有它的任何元素中删除.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

正确的方法是使用event-delegation：

$('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

const loginRoute = require('./routes/login');
app.use('/', loginRoute);

Answer 4

试试这个。

从所有li元素中删除该类，不包括单击元素上的单击元素和切换类。

＆＃13;

＆＃13;

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

＆＃13;

.active
{
    background-color: red;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 5

试试这个。它应该工作！所有答案都有效！

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