Применить class к элементу при клике по другому, соответствующему элементу (соответствие проверяется наличием одинаковой цифры в классе)

237

26 ноября 2016, 18:43

Есть две группы элементов. Обе группы имеют одинаковые цифры в классе.

Как сделать, чтобы при клике по элементу из первой группы выбирался элемент с соответствующей цифрой в классе из второй группы?

Примерно вижу это так:

$('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>

Но как сделать, чтобы переменная принимала цифру - не представляю

Answer 1

Кошерно решать это с помощью атрибутов data-*.

$('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

$('.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>

Если классов несколько

$('.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>