Как узнать номер кликнутого элемента?

274

06 декабря 2021, 09:20

Есть список и параграфы (к примеру):

<ul class="job__list"> 
     <li class="job__item"><a href="">Элемент 1</a></li> 
     <li class="job__item"><a href="">Элемент 2</a></li> 
     <li class="job__item"><a href="">Элемент 3</a></li> 
     <li class="job__item"><a href="">Элемент 4</a></li> 
     <li class="job__item"><a href="">Элемент 5</a></li> 
</ul> 
 
</br> 
 
<p class="job__text">Параграф 1</p> 
<p class="job__text">Параграф 2</p> 
<p class="job__text">Параграф 3</p> 
<p class="job__text">Параграф 4</p> 
<p class="job__text">Параграф 5</p>

Как мне при нажатии на ссылку с "Элементом 1" добавить класс "Параграфу 1" и так далее...

Как мне взять информацию на какой по счёту элемент нажимаю?

Answer 1

Можно обычным циклом пройтись по всем элементам-кнопкам, а число i из цикла как-раз будет совпадать с индексами кнопки, и параграфа - его и можно использовать, чтобы достать нужный элемент.

Максимально старый код, который будет работать везде:

var item = document.querySelectorAll('.job__item'); 
var text = document.querySelectorAll('.job__text'); 
 
for( var i = 0; i < item.length; i++ ){ 
  addClassOnClick(i); 
} 
 
function addClassOnClick(index){ 
  item[index].addEventListener('click', function(){ 
    text[index].className += " red"; 
  }); 
}

.red { color: red; }

<ul class="job__list"> 
     <li class="job__item">Элемент 1</li> 
     <li class="job__item">Элемент 2</li> 
     <li class="job__item">Элемент 3</li> 
     <li class="job__item">Элемент 4</li> 
     <li class="job__item">Элемент 5</li> 
</ul> 
 
<p class="job__text">Параграф 1</p> 
<p class="job__text">Параграф 2</p> 
<p class="job__text">Параграф 3</p> 
<p class="job__text">Параграф 4</p> 
<p class="job__text">Параграф 5</p>

Как правило это какой-то цикл, где можно по номеру итерации достать нужные элементы. Дальше уже можно играться, в зависимости от браузера, который хочется поддерживать ( https://caniuse.com/ ).

let item = document.querySelectorAll('.job__item'); 
let text = document.querySelectorAll('.job__text'); 
 
item.forEach(function(elem, i){ 
  elem.addEventListener('click', function(){ 
    text[i].classList.add('red'); 
  }); 
}); 
 
/* Или */ 
 
/* 
 
for( let i = 0; i < item.length; i++ ){ 
  item[i].addEventListener('click', function(){ 
    text[i].classList.add('.red'); 
  }); 
} 
 
То же самое с var не сработало бы. 
 
*/

.red { 
  color: red; 
}

<ul class="job__list"> 
  <li class="job__item">Элемент 1</li> 
  <li class="job__item">Элемент 2</li> 
  <li class="job__item">Элемент 3</li> 
  <li class="job__item">Элемент 4</li> 
  <li class="job__item">Элемент 5</li> 
</ul> 
 
<p class="job__text">Параграф 1</p> 
<p class="job__text">Параграф 2</p> 
<p class="job__text">Параграф 3</p> 
<p class="job__text">Параграф 4</p> 
<p class="job__text">Параграф 5</p>

Если используется делегирование, индекс кликнутого элемента можно узнать через indexOf:

document.querySelector('.job__list').addEventListener('click', function(e){ 
  if( e.target.closest(".job__item") ){ 
    let text = document.querySelectorAll('.job__text');     
    let index = [...document.querySelectorAll('.job__item')].indexOf( e.target ); 
 // indexOf - метод массива, поэтому элементы как-то нужно завернуть в обычный массив 
     
    text[index].classList.add('red'); 
  } 
});

.red { color: red; }

<ul class="job__list"> 
  <li class="job__item">Элемент 1</li> 
  <li class="job__item">Элемент 2</li> 
  <li class="job__item">Элемент 3</li> 
  <li class="job__item">Элемент 4</li> 
  <li class="job__item">Элемент 5</li> 
</ul> 
 
<p class="job__text">Параграф 1</p> 
<p class="job__text">Параграф 2</p> 
<p class="job__text">Параграф 3</p> 
<p class="job__text">Параграф 4</p> 
<p class="job__text">Параграф 5</p>