Question

我正在尝试将div的子元素切换为“活动”类

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>

所以我选择了所有带有data-dots属性的div，然后选择该div的子节点并将该类添加为active。我尝试使用e.target.children，但没有工作。

谢谢，我只是想学习：）

Answer 1

为了识别第一个孩子，最简单的选择就是使用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()被重写为箭头功能。

演示：

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

Answer 2

e.target已经您安装了侦听器的元素的已点击子元素。您可能希望改为使用e.currentTarget或this 然后，您可以从那里使用.getElementsByClassName()，.querySelector[All]()或.children。

Answer 3

您也可以尝试使用此代码。

 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')
        } 
     }
}

如何使用event.target获取元素的子元素

3 个答案: