How to implement select and exclude in jquery?

Question

JavaScript

There are two lists (ul>li*10). It is necessary that when clicking on li, an action is applied to all li except the current one.

I sort of did this (how correctly I'm not sure, you can certainly do better)

$('ul.left li, ul.right li').on('click', function () {
    var sel = $('ul.left li, ul.right li');
    sel.css('opacity','1');
    sel.not(this).css('opacity','.2');
    sel.addClass('active');
    sel.not(this).removeClass('active');
  });

And now how can I make all styles return when clicking on li where there is an active class?

Answer 1

$('ul.left li, ul.right li').on('click', function () {
    var sel = $('ul.left li, ul.right li');
    sel.hide();
    $(this).show();
  });

If you don’t just need to hide, then you do what is needed for everyone and then highlight a specific one. this is here just to understand which one you clicked on (from the entire li's array)
For example, instead of .hide() and .show() give them the same active class and set styles for it, and there will be less code in css just styles (that's what it's for)

$('ul.left li, ul.right li').on('click', function () {
    var sel = $('ul.left li, ul.right li');
    sel.removeClass('active');
    $(this).addClass('active');
  });

.active {
opacity: 1;
}
ul.left li, ul.right li {
opacity: 0.2;
}