Question

这是我的代码：

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/

Answer 1

您需要从按钮中取出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>

Answer 2

您只需要更改CSS选择器，即可在包装器中查找其class属性与您要悬停的按钮相匹配的div。

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

Answer 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;
	});	
});

如何按类查找元素计数并进行悬停计算？

3 个答案: