0

Код очень простой, обычно у меня это работало, но не в данном случаи, таких же переменных нету, названия менял. Вот код из-за которого всё и ломается:

let slides = document.querySelectorAll('.calendarBlock__slide');

slides.forEach((slide, i) => {
  let ids = slide.querySelectorAll('.calendar__checkInput');

  ids.forEach((id, x) => {
    let type = id.getAttribute('data-type');
    let label = id.parentNode;
    let number = `s${i+1}${type}`;

    id.setAttribute('id', number);
    label.setAttribute('for', number);
  });
})

Вот код с перебором:

let labels = document.querySelectorAll('.calendar__type');
labels.forEach(item => {
  item.addEventListener('click', () => {
    console.log(item)
    item.classList.toggle('active');
  })
})
<div class="calendar__types">
  <label for="" class="calendar__type calendar__type_green">
      <input type="checkbox" class="calendar__checkInput" data-type='1' id="">
      <span class="calendar__checkBlock">
        <img src="./assets/img/check.svg" alt="" class="svg calendar__checkIcon">
      </span>
      <span class="calendar__name">Начало торгов </span>
      <span class="calendar__number">32</span>
    </label>
  <label for="" class="calendar__type calendar__type_lightBlue">
      <input type="checkbox" class="calendar__checkInput" data-type='2' id="">
      <span class="calendar__checkBlock">
        <img src="./assets/img/check.svg" alt="" class="svg calendar__checkIcon">
      </span>
      <span class="calendar__name">Окончание тихого периода</span>
      <span class="calendar__number">17</span>
    </label>
  <label for="" class="calendar__type calendar__type_yellow">
      <input type="checkbox" class="calendar__checkInput" data-type='3' id="">
      <span class="calendar__checkBlock">
        <img src="./assets/img/check.svg" alt="" class="svg calendar__checkIcon">
      </span>
      <span class="calendar__name">Lockup (6 мес)</span>
      <span class="calendar__number">14</span>
    </label>
  <label for="" class="calendar__type calendar__type_yellow">
      <input type="checkbox" class="calendar__checkInput" data-type='4' id="">
      <span class="calendar__checkBlock">
        <img src="./assets/img/check.svg" alt="" class="svg calendar__checkIcon">
      </span>
      <span class="calendar__name">Lockup (3 мес)</span>
      <span class="calendar__number">10</span>
    </label>
  <label for="" class="calendar__type calendar__type_blue">
      <input type="checkbox" class="calendar__checkInput" data-type='5' id="">
      <span class="calendar__checkBlock">
        <img src="./assets/img/check.svg" alt="" class="svg calendar__checkIcon">
      </span>
      <span class="calendar__name">Отчетный день</span>
      <span class="calendar__number">15</span>
    </label>
</div>

И таких блоков несколько, и каждый из таких блоков расположен в разных calendarBlock__slide. Id у всех элементов уникальный

7
  • как связан первый код со вторым? В какой момент что вызывается? Какая разметка для приведенного кода? Почему ты думаешь, что вызывается два раза? Почему не должно вызываться два раза?
    – Grundy
    28 ноя 2020 в 23:05
  • В общем этот код никак особо не связан. В первом примере добавляется for, для label, во втором примере я отслеживаю клик по этому label. Во втором примере кода есть console.log, который при клике на label вызывается два раза
    – Vashka
    28 ноя 2020 в 23:12
  • все зависит от разметки к которой этот код применяется
    – Grundy
    29 ноя 2020 в 0:21
  • А зачем это делать 2 раза? Почему не повесить слушатель в первом цикле, если перебираете одни и теже элементы?
    – mego4iter
    29 ноя 2020 в 1:20
  • Он перебирает разные элементы
    – Vashka
    29 ноя 2020 в 15:51

1 ответ 1

1

Updated. После непродолжительной беседы. Пришлите к ответу.

clicking on a LABEL will bubble-up a click event. The solution appears to be to check to see if the event was triggered by the label

Решение, нужно проверить, было ли событие инициировано меткой.

let labels = document.querySelectorAll('.calendar__type');
labels.forEach(item => {
  item.addEventListener('click', (event) => {
    if(event.target.nodeName == 'LABEL'){
       console.log(item)
       item.classList.toggle('active');
    }
  })
})
7
  • А что за минус можно как-то пояснить 29 ноя 2020 в 5:48
  • id уникальный у всех элементов
    – Vashka
    29 ноя 2020 в 15:52
  • i это индекс, он не может быть одинаковым у двух элементов
    – Vashka
    29 ноя 2020 в 15:58
  • slides.forEach((slide, i) => { let ids = slide.querySelectorAll('.calendar__checkInput'); ids.forEach((id, x) => {. Вот отсюда мне это не кажется таким 29 ноя 2020 в 16:11
  • ок, но оно является уникальным у каждого элемента. label у каждого элемента сам по себе работает
    – Vashka
    29 ноя 2020 в 16:15

Ваш ответ

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

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