关于列表元素的单击更改类的jQuery

Question

Here is my dynamically generated lists :

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

and the js function:

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

My problem is using this code when I clicked 1st li element, this js function add a active class successfully . But this does not work for 2nd, or 4th li element (printing clicked in console).So the codes only working for 1st, 3rd , and 5th li elements. If I double click 2nd or 4th li element then the code working as expected.

All I want to do is after a click change a single li element css class to active or remove active class if there is already existing active class.

Answer 1

Remove onclick attributes from <a> . And don't wrap click inside other function. And also use .color instead of #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

jQuery.click() vs onClick .. you can still use onclick .. and use toggleClass() for active class instead of 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> 

^{But to be honest personally I don't prefer to use onclick= using a .click which presented by @Maheer answer is for me much much better}