jquery on click更改列表元素类

pyprism • 7 年前 • 2009 次点击

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

<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类到 积极的 或移除 积极的 类(如果已经存在) 积极的 班级。

Python社区是高质量的Python/Django开发社区
本文地址：http://www.python88.com/topic/30854

文章 [ 2 ] | 最新文章 7 年前

• 1 楼

Mohamed-Yousef 7 年前

jQuery.click() vs onClick …你还可以用 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>

^{但是说实话

我个人不喜欢用

onclick=

使用A

.click

@maheer answer提供的答案对我来说好多了}

• 2 楼

Maheer Ali 7 年前

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

登录后回复