0

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

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

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

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

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

2 ответа 2

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>

2
  • вопрос оказался неточным) не то что надо, Уточню напишу. Первый не подойдет, а второй слишком сложный для моего случая
    – engenes
    26 окт 2016 в 7:43
  • Внес изменения в вопрос. Так понял, второй вариант оптимальный?
    – engenes
    26 окт 2016 в 11:29
0

Кошерно решать это с помощью атрибутов 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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.