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类。但这不适用于第二个或第四个li元素（在控制台中打印clicked）。因此，这些代码仅适用于第一个，第三个和第五个li元素。如果我双击第二个或第四个li元素，则代码将按预期工作。

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

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>

Answer 2

docs ..您仍然可以使用onclick ..并为toggleClass()类使用active代替add/removeClass

function color_select(el) {
    $('.color').removeClass('active').filter(el).toggleClass('active'); // remove active class from the li's and toggle the class for the clicked element
}

.active{
  color : red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<ul class="config-swatch-list">

   <li class='color' onclick="color_select(this);">
        <a href="#" style="background-color: random_val">Link 1</a>
   </li>
   <li class='color' onclick="color_select(this);">
        <a href="#" style="background-color: random_val">Link 2</a>
   </li>
   <li class='color' onclick="color_select(this);">
        <a href="#" style="background-color: random_val">Link 3</a>
   </li>
   <li class='color' onclick="color_select(this);">
        <a href="#" style="background-color: random_val">Link 4</a>
   </li>
   <li class='color' onclick="color_select(this);">
        <a href="#" style="background-color: random_val">Link 5</a>
   </li>

</ul>

^{但是，老实说，我个人不希望将@Maheer答案提出的onclick=与.click一起使用对我来说要好得多< / sup>}

jQuery的列表元素的点击更改类

2 个答案: