javascript - jquery单击更改列表元素的类

Question

这是我动态生成的列表：

<ul class="config-swatch-list">

   <li class='color' onclick="color_select();">
        <a href="#" style="background-color: random_val"></a>
   </li>
   <li class='color' onclick="color_select();">
        <a href="#" style="background-color: random_val"></a>
   </li>
   <li class='color' onclick="color_select();">
        <a href="#" style="background-color: random_val"></a>
   </li>
   <li class='color' onclick="color_select();">
        <a href="#" style="background-color: random_val"></a>
   </li>
   <li class='color' onclick="color_select();">
        <a href="#" style="background-color: random_val"></a>
   </li>

</ul>

和js函数：

function color_select() {
    $('#color').click(function()
    {
        if ($(this).hasClass('active')) {
            console.log('clicked');
            $(this).removeClass('active');
        } else {
            $(this).addClass('active');
        }
    });
}

我的问题是单击第一个li元素时使用此代码，此 js 函数active成功添加了一个类。但这不适用于第 2 或第 4 个li元素（在控制台中打印clicked）。因此代码仅适用于第 1、第 3 和第 5 个li元素。如果我双击第二个或第四个li元素，那么代码将按预期工作。

我想要做的就是在单击后将单个li元素 css 类更改为active或删除active类（如果已经存在active类）。

标签： javascriptjquery

Answer 1

从 中删除onclick属性<a>。并且不要包裹click在其他功能中。并且还使用.color而不是#color `

$('.color').click(function()
{
   if ($(this).hasClass('active')) {
       console.log('clicked');
       $(this).removeClass('active');
   } else {
         $(this).addClass('active');
    }
});

.active{
  color:orange;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="config-swatch-list">

   <li class='color'>
        <a href="#" style="background-color: random_val">one</a>
   </li>
   <li class='color'>
        <a href="#" style="background-color: random_val">two</a>
   </li>
   <li class='color'>
        <a href="#" style="background-color: random_val">three</a>
   </li>
   <li class='color' >
        <a href="#" style="background-color: random_val">four</a>
   </li>
   <li class='color'>
        <a href="#" style="background-color: random_val">five</a>
   </li>

</ul>