javascript - 如何通过将鼠标悬停在 Javascript 中的三个按钮之一上来显示和更新隐藏的 div 元素？

Question

我想将鼠标悬停在按钮上，并希望通过使用 java 脚本在其下方显示一个隐藏的 div/面板。我的 Javascript 是外部包含的并且工作正常，我正在尝试使用 DOM 模型来更改 div 的样式和 innerHTML 但不起作用。下面是我的 HTML、Javascript 和 CSS 代码。我什至传递参数来验证哪个按钮被悬停但失败了。HTML

<div class="container">
     <div class="row anchorbutton">
          <div class="col-sm-4 col-xs-12 col-md-4 col-lg-4">
    <a href=#><div class=" mainbuttons b1 text-center"  
         onmouseover="updatepanel(1);" onmouseout="hidepanel()">Workout 
                                    Programs</div></a>
     </div>
     <div class="col-sm-4 col-md-4 col-lg-4 col-xs-12">
          <a href=#><div class=" mainbuttons b2 text-center" 
             onmouseover="updatepanel(2);" onmouseout="hidepanel()"> Diet 
               Plans</div></a>
     </div>
     <div class="col-sm-4 col-md-4 col-lg-4 col-xs-12 ">
           <a href=#><div class=" mainbuttons  b3 text-center" 
            onmouseover="updatepanel(3);" onmouseout="hidepanel()"> Food 
             Supplements</div></a>
     </div>
     </div>
   </div>
  <div class="container">
   <div class="panel panel-default hidden">
       <div class="hoverable panel-body hidden"> </div>
    </div>
 </div>

JS

function hidepanel(){

var panel=document.getElementsByClassName("hidden");
panel.style.display=none;
}

 function updatepanel(x){
 var desc1="Get fully customized workout programs from our dedicated fitness 
 experts.";
 var desc2="Nutrional advice and diet plans just for your needs!";
 var desc3="Our very own state-of-the-art line of supplementations.Click to 
 Order";

  if(x==1){}
  document.getElementsByClassName('hidden').style.display='block';
  document.getElementsByClassName('hidden').innerHTML='desc1';
  }
   if(x==2){
   document.getElementsByClassName('hidden').style.display='block';
   document.getElementsByClassName('hidden').innerHTML='desc2';
   }
    if(x==3){
     document.getElementsByClassName('hidden').style.display='block';
      document.getElementsByClassName('hidden').innerHTML='desc3';
       }
   }

CSS

.hidden{
 display: none;
 }

我还尝试通过更改功能以在 onClick 而不是 onmousehover 上工作来更改功能，但它不会工作。请帮帮我，我一直在敲我的头。

Answer 1

document.getElementsByClassName()返回 HTML Collection ，它是元素的集合，所以像 collection.style.display 或 collection.innerHTML 这样的说法没有多大意义。我认为您想要做的是获取单个元素并更新属性，如下所示:

document.getElementsByClassName("隐藏")[0]。

如果您需要遍历集合，您可以访问 length 属性并执行传统的 for 循环，或者您可以执行 Array.from () 使用 ES6。

function hidepanel() {
  var panel = document.querySelector(".hidden");
  panel.style.display = "none";
}

function updatepanel(x) {
  var desc1 = "Get fully customized workout programs from our dedicated fitness experts.";
  var desc2 = "Nutrional advice and diet plans just for your needs!";
  var desc3 = "Our very own state-of-the-art line of supplementations.Click to Order";
  
  // make variable so we don't have to search the DOM 2 times for every panel
  var hiddenElem = document.querySelector(".hidden"); 
  var panelBody = document.querySelector(".panel-body");
  if (x == 1) {
    hiddenElem.style.display = 'block'; 
    panelBody.innerHTML = 'desc1';
  }
  // don't evaluate unnecessarily
  else if (x == 2) {
    hiddenElem.style.display = 'block'; 
    panelBody.innerHTML = 'desc2';
  }
  // don't evaluate unnecessarily
  else if (x == 3) {
    hiddenElem.style.display = 'block'; 
    panelBody.innerHTML = 'desc3';
  }
}

.hidden{
 display: none;
}

<div class="container">
  <div class="row anchorbutton">
    <div class="col-sm-4 col-xs-12 col-md-4 col-lg-4">
      <a href=#>
        <div class=" mainbuttons b1 text-center" onmouseover="updatepanel(1);" onmouseout="hidepanel()">Workout Programs
        </div>
      </a>
    </div>
    <div class="col-sm-4 col-md-4 col-lg-4 col-xs-12">
      <a href=#>
        <div class=" mainbuttons b2 text-center" onmouseover="updatepanel(2);" onmouseout="hidepanel()"> Diet Plans
        </div>
      </a>
    </div>
    <div class="col-sm-4 col-md-4 col-lg-4 col-xs-12 ">
      <a href=#>
        <div class=" mainbuttons  b3 text-center" onmouseover="updatepanel(3);" onmouseout="hidepanel()"> Food Supplements
        </div>
      </a>
    </div>
  </div>
</div>
<div class="container">
  <div class="panel panel-default hidden">
    <div class="hoverable panel-body"> </div>
  </div>
</div>

或者，您可以使用内置的 document.querySelectorAll() ，它返回一个 NodeList，它确实有一个内置的迭代器函数(forEach)，这使得在列表上迭代更干净/更容易。

看起来像这样:

document.querySelectorAll(".hidden").forEach(function (elem) {
  elem.syle.display = "block";
  // etc...
});