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 you have read our privacy policy.

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