Apply a class to an element when clicking on another, corresponding element (compliance is checked by having the same digit in the class)

Question

There are two groups of elements. Both groups have the same numbers in the class.

How to make that when you click on an element from the first group, an element is selected with the corresponding digit in the class from the second group?

I see it like this:

$('ul.one>li').click(function() { //var e=... $('li.a-click-' + e).addClass('active'); });

 li.active { color: #fff; background: #4CAF50; padding: 0 15px; list-style: none; margin: 5px; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <ul class='one'> <li class='item click-1'>1</li> <li class='item click-2'>2</li> <li class='item click-3'>3</li> <li class='item click-4'>4</li> </ul> <ul class='two'> <li class='a-item-1'>1</li> <li class='a-item-2'>2</li> <li class='a-item-3'>3</li> <li class='a-item-4'>4</li> </ul>

But how to make the variable take the figure - I can not imagine

user207618 · Accepted Answer · 2016-10-26T11:37:20

It’s kosher to solve this with the help of data-* attributes.

 $('ul.one').on('click', '.item', function(e){ let id = this.dataset.id; $('li.a-item-' + id).toggleClass('active'); });

 li{ cursor: pointer; } li.active { color: #fff; background: #4CAF50; padding: 0 15px; list-style: none; margin: 5px; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <ul class='one'> <li class='item click' data-id='1'>1</li> <li class='item click' data-id='2'>2</li> <li class='item click' data-id='3'>3</li> <li class='item click' data-id='4'>4</li> </ul> <ul class='two'> <li class='a-item-1'>1</li> <li class='a-item-2'>2</li> <li class='a-item-3'>3</li> <li class='a-item-4'>4</li> </ul>

Answer 2 · 2016-10-26T07:06:36

 $('.one').click(function(e) { var className = e.target.className; $('.a-' + className).toggleClass('active'); });

 .active { color: #fff; background: #4CAF50; padding: 0 15px; list-style: none; margin: 5px; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <ul class='one'> <li class='click-1'>1</li> <li class='click-2'>2</li> <li class='click-3'>3</li> <li class='click-4'>4</li> </ul> <ul class='two'> <li class='a-click-1'>1</li> <li class='a-click-2'>2</li> <li class='a-click-3'>3</li> <li class='a-click-4'>4</li> </ul>

If there are several classes

 $('.one').click(function(e) { var className = e.target.className; // индекс начала нужного класс в данном случае 'click' var ind = className.indexOf('click'); // нужный символ из строки className = индекс начала класса + число символов до цифры var sym = className[ind + 6]; $('.a-click-' + sym).toggleClass('active'); });

 .active { color: #fff; background: #4CAF50; padding: 0 15px; list-style: none; margin: 5px; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <ul class='one'> <li class='click-1 another'>1</li> <li class='click-2 another'>2</li> <li class='click-3 another'>3</li> <li class='click-4 another'>4</li> </ul> <ul class='two'> <li class='a-click-1'>1</li> <li class='a-click-2'>2</li> <li class='a-click-3'>3</li> <li class='a-click-4'>4</li> </ul>

the question turned out to be inaccurate) is not what is necessary, I will write more precisely.
The first will not work, and the second is too complicated for my case

Apply a class to an element when clicking on another, corresponding element (compliance is checked by having the same digit in the class)

2 answers 2

More articles: