javascript - addEventListener mouseenter not

Question

我想知道我怎样才能（点击）通过班级孩子的每个元素。如果子元素选择了其他类，我想将计数器设置为 += 1。

毕竟我计划在同一次点击时打印消息：您选择了 0,1,2,3 个元素，类 .SELECTED

你能帮我吗？

const children = document.querySelectorAll('.children');
const selected = document.getElementsByClassName('selected');
const button = document.getElementById('bttn');
let counter = 0;
for (let i = 0; i < children.length; i++) {

    children[i].addEventListener('click', () => {
        if (children[i].classList.contains('selected')) {
            children[i].classList.remove('selected')
        } else {
            children[i].classList.add('selected')
        }

        button.addEventListener('click', () => {
            for (u = 0; u < children[i]; u++) {
                if (children[i].classList == 'selected') {
                    counter++;
                }
            }
            console.log(counter);
        })

    })

}

#div {
            display: inline-flex;
            flex-direction: column;
        }

        .children {
            cursor: pointer;
        }

        .selected {
            background-color: royalblue;
        }

<div id="div">
        <span class='children selected'>children1</span>
        <span class='children'>children2</span>
        <span class='children'>children3</span>
    </div>
    <p><input id="bttn" type='button' value='klik'></p>

标签： javascripthtmldom

Answer 1

您可以使用forEach循环和使用event.target. 而不是测试一个元素是否包含一个只是为了添加/删除它的类，使用classList.toggle().

e.target.classList.toggle('selected');

children要获得班级总数，selected您可以简单地执行以下操作：

counter = document.querySelectorAll('.children.selected').length

const children = document.querySelectorAll('.children');
const selected = document.getElementsByClassName('selected');
const button = document.getElementById('bttn');
let counter = 0;
children.forEach(el => {
  el.addEventListener('click', (e) => {
    e.target.classList.toggle('selected');
  })
})
button.addEventListener('click', () => {
  counter = document.querySelectorAll('.children.selected').length;
  console.log(counter);
})

#div {
  display: inline-flex;
  flex-direction: column;
}

.children {
  cursor: pointer;
}

.selected {
  background-color: royalblue;
}

<div id="div">
  <span class='children selected'>children1</span>
  <span class='children'>children2</span>
  <span class='children'>children3</span>
</div>
<p><input id="bttn" type='button' value='klik'></p>