jquery on click更改列表元素类

以下是我动态生成的列表:

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

我的问题是在单击1时使用此代码 li 元素,此JS函数添加 active 类成功。但这对2号或4号不起作用 锂 元件(打印 clicked 在控制台中)。因此代码仅适用于1、3和5 锂 元素。如果我双击2nd或4th 锂 元素,然后代码按预期工作。

我要做的就是在单击后更改一个 锂 元素css类到 积极的 或移除 积极的 类(如果已经存在) 积极的 班级。