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 that you have read and understand our privacy policy and code of conduct.

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