Как получить дочерний элемент с помощью event.target

Question

Я пытаюсь заставить дочерние элементы div переключать класс 'active'

JS

    const dots = document.querySelectorAll('[data-dots]');
    dots.forEach(dot => dot.addEventListener('click', handleClick));

    function handleClick(e) {
     e.target.getElementsByClassName('tb-drop').classList.toggle('active');
     console.log(e.target.getElementsByClassName('tb-drop'))
    }

HTML

       <div class="dots" data-dots>
         <i class="fas fa-ellipsis-v dots"></i>
         <div class="tb-drop">
            <i class="far fa-edit icon-grid"></i>
            <i class="fas fa-link icon-grid"></i>
         </div>
       </div>

Так что яЯ выбираю все элементы div с атрибутом data-dots, затем выбираю дочерний элемент этого элемента div и добавляю класс active.Я пытался с e.target.children, но не сработало.

Спасибо, я просто пытаюсь выучить:)

Answer 1

e.target уже является дочерним элементом, по которому щелкнули, элемента, на который вы установили прослушиватель.Вы, вероятно, хотите использовать e.currentTarget или this.
Тогда вы можете использовать .getElementsByClassName(), .querySelector[All]() или .children оттуда.

Answer 2

Вы также можете попробовать этот код.

 var dots = document.querySelectorAll('[data-dots]');
  for (var i = 0; i < dots.length; i++) {
      dots[i].addEventListener('click', function () {
          handleClick(this);
      }, false);
  }

function handleClick(object) {
     var container = object.getElementsByClassName('tb-drop')[0];
     if (container != undefined) {
        if (container.classList.contains('active')) {
            container.classList.remove('active')
        }else{
            container.classList.add('active')
        } 
     }
}

Answer 3

Чтобы идентифицировать первого потомка, самый простой вариант - просто использовать Element.querySelector() вместо Element.getElementsByClassName():

const dots = document.querySelectorAll('[data-dots]');
dots.forEach(dot => dot.addEventListener('click', handleClick));

function handleClick(e) {
  // Element.querySelector() returns the first - if any -
  // element matching the supplied CSS selector (element,
  // elements):
  e.target.querySelector('.tb-drop').classList.add('active');
}

. Проблема, конечно, в том, что если соответствующий элемент ненайдено Element.querySelector(), затем возвращается null;где ваш скрипт выдаст ошибку.Итак, имея это в виду, имеет смысл проверить, что элемент существует, прежде чем пытаться его изменить:

const dots = document.querySelectorAll('[data-dots]');
dots.forEach(dot => dot.addEventListener('click', handleClick));

function handleClick(e) {
  let el = e.target.querySelector('.tb-drop');
  if (el) {
    el.classList.add('active');
  }
}

Стоит также отметить, что EventTarget.addEventListener() передает элемент this в функцию,поэтому вместо использования:

e.target.querySelector(...)

вполне можно просто написать:

this.querySelector(...)

Если, конечно, handleClick() не переписан как функция Arrow.

Демо:

const dots = document.querySelectorAll('[data-dots]');
dots.forEach(dot => dot.addEventListener('click', handleClick));

function handleClick(e) {
  let el = e.target.querySelector('.tb-drop');
  if (el) {
    el.classList.add('active');
  }
}

div {
  display: block;
  border: 2px solid #000;
  padding: 0.5em;
}

i {
  display: inline-block;
  height: 1em;
}

::before {
  content: attr(class);
}

.active {
  color: limegreen;
}

<div class="dots" data-dots>
  <i class="fas fa-ellipsis-v dots"></i>
  <div class="tb-drop">
    <i class="far fa-edit icon-grid"></i>
    <i class="fas fa-link icon-grid"></i>
  </div>
</div>

Или, если вы хотите переключить «активный» класс, вы можете вместо этого использовать toggle() вместо add:

const dots = document.querySelectorAll('[data-dots]');
dots.forEach(dot => dot.addEventListener('click', handleClick));

function handleClick(e) {
  let el = e.target.querySelector('.tb-drop');
  if (el) {
    el.classList.toggle('active');
  }
}

div {
  display: block;
  border: 2px solid #000;
  padding: 0.5em;
}

i {
  display: inline-block;
  height: 1em;
}

::before {
  content: attr(class);
}

.active {
  color: limegreen;
}

<div class="dots" data-dots>
  <i class="fas fa-ellipsis-v dots"></i>
  <div class="tb-drop">
    <i class="far fa-edit icon-grid"></i>
    <i class="fas fa-link icon-grid"></i>
  </div>
</div>

Ссылки:

• Element.querySelector