Question

如何在悬停时显示和隐藏 div 中的某些元素？

2021-04-19

308

javascript html

我尝试在将鼠标悬停在 div 上时显示 div 中的按钮并隐藏其中的文本，然后隐藏按钮但显示 div 的文本。我一直收到未定义的错误。我做错了什么？

Error:

coreScript.js:12 Uncaught TypeError: Cannot set property 'display' of undefined

at showButton (coreScript.js:12)

at HTMLDivElement.onmouseover (Core.html:33)

coreScript.js:6 Uncaught TypeError: Cannot set property 'display' of undefined

at hideButton (coreScript.js:6)

at HTMLDivElement.onmouseout (Core.html:33)

function hideButton() {
  document.getElementsByClassName('xOne').style.display = 'none';
  document.getElementsByClassName('xTen').style.display = 'none';
  document.getElementsByClassName('all').style.display = 'none';
  document.getElementsByClassName('name').style.display = 'block';
}

function showButton() {
  document.getElementsByClassName('xOne').style.display = 'block';
  document.getElementsByClassName('xTen').style.display = 'block';
  document.getElementsByClassName('all').style.display = 'block';
  document.getElementsByClassName('name').style.display = 'none';
}

.main-div {
  border: 1px solid black;
  min-width: 198px;
  max-width: 198px;
  min-height: 33px;
  max-height: 33px;
  font-size: 16px;
  vertical-align: middle;
  background-color: #fff;
  margin: 5px;
  line-height: 34px;
  overflow: hidden;
  text-align: center;
  cursor: pointer;
  animation: boxShadowNone 0.1s;
  box-shadow: none;
}

<div class="main-div" onmouseover="showButton()" onmouseout=" hideButton()" onclick="sell()" id="sellMeat">
  <div class="name">SELL MEAT</div>
  <div class="xOne" style="display: none;">x1</div>
  <div class="xTen" style="display: none;">x10</div>
  <div class="all" style="display: none;">All</div>
</div>

<br>

<div class="main-div" onmouseover="showButton()" onmouseout="changeText(this, 'SELL LEATHER', '16px'); hideButton()" onclick="sell()" id="sellLeather">
  <div class="name">SELL Leather</div>
  <div class="xOne" style="display: none;">x1</div>
  <div class="xTen" style="display: none;">x10</div>
  <div class="all" style="display: none;">All</div>
</div>

Answer 1

getElementsByClassName 返回一个 HTMLCollection ，它是所有子元素的类似数组的对象。

将 getElementsByClassName(class) 替换为 querySelector(.class) ，以获得正确的行为。

您也可以执行 getElementsByClassName(class)[0] 来访问元素，但我认为 querySelector 非常适合这种特定用例。

function hideButton(e) {
  const element = e.currentTarget;
  element.querySelector('.xOne').style.display = 'none';
  element.querySelector('.xTen').style.display = 'none';
  element.querySelector('.all').style.display = 'none';
  element.querySelector('.name').style.display = 'block';
}

function showButton(e) {
 const element = e.currentTarget;
  element.querySelector('.xOne').style.display = 'block';
  element.querySelector('.xTen').style.display = 'block';
  element.querySelector('.all').style.display = 'block';
  element.querySelector('.name').style.display = 'none';
}

.main-div {
  border: 1px solid black;
  min-width: 198px;
  max-width: 198px;
  min-height: 33px;
  max-height: 33px;
  font-size: 16px;
  vertical-align: middle;
  background-color: #fff;
  margin: 5px;
  line-height: 34px;
  overflow: hidden;
  text-align: center;
  cursor: pointer;
  animation: boxShadowNone 0.1s;
  box-shadow: none;
}

<div class="main-div" onmouseover="showButton(event)" onmouseout=" hideButton(event)" id="sellMeat">
  <div class="name">SELL MEAT</div>
  <div class="xOne" style="display: none;">x1</div>
  <div class="xTen" style="display: none;">x10</div>
  <div class="all" style="display: none;">All</div>
</div>

<br>

<div class="main-div" onmouseover="showButton(event)" onmouseout=" hideButton(event)" id="sellLeather">
  <div class="name">SELL Leather</div>
  <div class="xOne" style="display: none;">x1</div>
  <div class="xTen" style="display: none;">x10</div>
  <div class="all" style="display: none;">All</div>
</div>

Answer 2

Lakshya Thakur 为您提供了各种出色的解决方案。正如他所说， getElementsByClassName 返回一个集合；但如果您想将样式应用于具有特定类的所有元素（以防将来有多个元素），您可以在循环内应用样式。

function hideButton() {
      document.getElementsByClassName('xOne').forEach(
                   element => element.style.display = 'none'; 
      );
}

我没有尝试代码，但这是逻辑。