jquery on click change class of list element

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.

Maheer Ali · Accepted Answer · 2019-03-09T06:45:19.763

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>

Mohamed-Yousef · Answer 2 · 2019-03-09T06:52:06.457

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}

jquery on click change class of list element

2 Answers2