如何按类查找元素数量并在悬停时计算？答案

【问题标题】：How to find count of elements by class and calculate on hover?如何按类查找元素数量并在悬停时计算？
【发布时间】：2019-05-18 15:53:54
【问题描述】：

这是我的代码：

let btns = document.querySelectorAll('button');

for (let i = 0; i < btns.length; i++) {
  btns[i].onmouseover = (event) => {
    document.querySelector(`#result`).innerHTML = document.querySelectorAll(`#wrapper .innerElemType${i+1}`).length
  }
}

#wrapper {
  width: 10rem;
  background: yellow;
  margin-bottom: 1rem;
}

#btn {
  width: 10rem;
}

#result {
  width: 100px;
  height: 20px;
  margin-top: 40px;
  background: red;
  border-radius: 8px;
  text-align: center;
}

<div id="wrapper">
  <div class="Type1">
    <div class="Type1-1">
      <div class="Type1-1-1"></div>
      <div class="Type1-1-1"></div>
      <div class="Type1-1-1"></div>
    </div>
    <div class="Type1-1">
      <div class="Type1-1-2"></div>
      <div class="Type1-1-2"></div>
    </div>
  </div>

  <div class="Type2">
    <div class="Type2-1">
      <div class="Type2-1-1"></div>
      <div class="Type2-1-1"></div>
      <div class="Type2-1-1"></div>
      <div class="Type2-1-1"></div>
      <div class="Type2-1-1"></div>
    </div>
    <div class="Type2-1">
      <div class="Type2-1-2"></div>
      <div class="Type2-1-2"></div>
      <div class="Type2-1-2"></div>
    </div>
  </div>

  <div class="Type3">
    <div class="Type3-1">
      <div class="Type3-1-1"></div>
      <div class="Type3-1-1"></div>
    </div>
    <div class="Type3-1">
      <div class="Type3-1-2"></div>
      <div class="Type3-1-2"></div>
      <div class="Type3-1-2"></div>
    </div>
  </div>

  <div class="Type4">
    <div class="Type4-1">
      <div class="Type4-1-1"></div>
      <div class="Type4-1-1"></div>
    </div>
    <div class="Type4-1">
      <div class="Type4-1-2"></div>
      <div class="Type4-1-2"></div>
    </div>
  </div>


  <button id="Type1">Type1</button>
  <button id="Type2">Type2</button>
  <button id="Type3">Type3</button>
  <button id="Type4">Type3</button>
  <button id="Type1-1">Type1-1</button>
  <button id="Type2-1">Type2-1</button>
  <button id="Type3-1">Type3-1</button>
  <button id="Type4-1">Type4-1</button>
  <button id="Type1-1-1">Type1-1-1</button>
  <button id="Type2-1-1">Type2-1-1</button>
  <button id="Type3-1-1">Type3-1-1</button>
  <button id="Type4-1-1">Type4-1-1</button>
</div>


<div id="result">Type1 Result</div>

我有一棵树，主 div 有 Type1、Type2、Type3、Type4 类。在主 div 中我们有子类，在子类中我们有子子类。

如何通过将鼠标悬停在相关按钮上来获取相同类元素的数量？需要 javascript 帮助。

https://jsfiddle.net/739bL1a4/7/

【问题讨论】：

标签： javascript arrays for-loop if-statement

【解决方案1】：

您只需更改您的 CSS 选择器以在包装器内查找其类属性与您悬停的按钮的属性匹配的 div。

`#wrapper div[class="${btns[i].innerText}"]`

【讨论】：

【解决方案2】：

您需要从按钮中获取id 并将其包含在您的.querySelectorAll 中

let btns = document.querySelectorAll('button');

for (let i = 0; i < btns.length; i++) {
  btns[i].onmouseover = (event) => {
    document.querySelector(`#result`).innerHTML = document.querySelectorAll(`#wrapper .${event.target.id}`).length
  }
}

#wrapper {
  width: 10rem;
  background: yellow;
  margin-bottom: 1rem;
}

#btn {
  width: 10rem;
}

#result {
  width: 100px;
  height: 20px;
  margin-top: 40px;
  background: red;
  border-radius: 8px;
  text-align: center;
}

<div id="wrapper">
  <div class="Type1">
    <div class="Type1-1">
      <div class="Type1-1-1"></div>
      <div class="Type1-1-1"></div>
      <div class="Type1-1-1"></div>
    </div>
    <div class="Type1-1">
      <div class="Type1-1-2"></div>
      <div class="Type1-1-2"></div>
    </div>
  </div>

  <div class="Type2">
    <div class="Type2-1">
      <div class="Type2-1-1"></div>
      <div class="Type2-1-1"></div>
      <div class="Type2-1-1"></div>
      <div class="Type2-1-1"></div>
      <div class="Type2-1-1"></div>
    </div>
    <div class="Type2-1">
      <div class="Type2-1-2"></div>
      <div class="Type2-1-2"></div>
      <div class="Type2-1-2"></div>
    </div>
  </div>

  <div class="Type3">
    <div class="Type3-1">
      <div class="Type3-1-1"></div>
      <div class="Type3-1-1"></div>
    </div>
    <div class="Type3-1">
      <div class="Type3-1-2"></div>
      <div class="Type3-1-2"></div>
      <div class="Type3-1-2"></div>
    </div>
  </div>

  <div class="Type4">
    <div class="Type4-1">
      <div class="Type4-1-1"></div>
      <div class="Type4-1-1"></div>
    </div>
    <div class="Type4-1">
      <div class="Type4-1-2"></div>
      <div class="Type4-1-2"></div>
    </div>
  </div>


  <button id="Type1">Type1</button>
  <button id="Type2">Type2</button>
  <button id="Type3">Type3</button>
  <button id="Type4">Type3</button>
  <button id="Type1-1">Type1-1</button>
  <button id="Type2-1">Type2-1</button>
  <button id="Type3-1">Type3-1</button>
  <button id="Type4-1">Type4-1</button>
  <button id="Type1-1-1">Type1-1-1</button>
  <button id="Type2-1-1">Type2-1-1</button>
  <button id="Type3-1-1">Type3-1-1</button>
  <button id="Type4-1-1">Type4-1-1</button>
</div>


<div id="result">Type1 Result</div>

【讨论】：

谢谢，但是当我将鼠标悬停在 type1 按钮上时，如何获取“type1-1”div 的计数？
你可以使用document.querySelectorAll(`#wrapper .${event.target.id}`).children
抱歉，document.querySelectorAll 将返回一个节点列表，您需要循环遍历它。

【解决方案3】：

const btns = document.querySelectorAll('button');
const resultDiv = document.getElementById('result');

btns.forEach(btn => {
	btn.addEventListener('mouseover', () => {
    const totalNumber = document.querySelectorAll('.' + btn.textContent).length;
  	resultDiv.textContent = totalNumber;
	});	
});

【讨论】：