1

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

<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" и так далее...

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

1 ответ 1

3

Можно обычным циклом пройтись по всем элементам-кнопкам, а число 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>

5
  • Спасибо, Вы частенько меня выручаете, я изучаю вроде JS, вроде как прочитал много, а вот мыслить как "программист" не очень получается. Над обычной задачей могу просидеть минут 30, бывало и часы)
    – hitFM
    1 дек 2019 в 9:21
  • 2
    @hitFM, в этом нет ничего страшного, "чтение" не помогает, так таковое, нужно больше практики, со временем придёт, старайтесь разбивать задачу на составляющие и решать их
    – meine
    1 дек 2019 в 9:29
  • Да, стараюсь уже больше практиковаться, делаю успехи и мне это нравится) Но сидеть над одной задачей и не решать её долго, очень утомляет)
    – hitFM
    1 дек 2019 в 9:37
  • @hitFM, это ещё ничего, по сравнению с тем, что вас ждёт в будущем :)
    – meine
    1 дек 2019 в 9:46
  • хах, не пугайте меня!)
    – hitFM
    1 дек 2019 в 9:47

Ваш ответ

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

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