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

Question

我想将鼠标悬停在按钮上，并希望使用java脚本在其下方显示隐藏的div / panel。我的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("hidden")[0]。

如果你需要迭代集合，你可以访问length属性并做一个传统的for循环，或者你可以使用ES6做Array.from()。

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

Answer 2

首先document.getElementsByClassName返回一个HTML集合，因此您必须指定要使用的元素的索引，例如：document.getElementsByClassName('hidden')[0]。

第二个panel.style.display必须定义为一个字符串，所以在你的隐藏函数中将none更改为"none"

工作代码：https://codepen.io/sunrisem/pen/QagPLG

Answer 3

不要在你的html中使用内联javascript，而是循环元素并将事件监听器附加到它们。您可以在按钮上设置数据属性，因此您可以创建一个如下所示的数组来保存文本，也可以将文本作为数据属性。您还需要一个对鼠标做出反应而离开按钮的侦听器，以再次隐藏div。您应该可以轻松地更改代码以适合您的类...

let div = document.getElementById('d');
let descriptions = [
  "Get fully customized workout programs from our dedicated fitness experts.",
  "Nutrional advice and diet plans just for your needs!",
  "Our very own state-of-the-art line of supplementations.Click to Order"
];

document.querySelectorAll('.btn').forEach(e => {
  e.addEventListener('mouseover', ({
    target
  }) => {
    div.innerHTML = descriptions[target.getAttribute('data-nr')];
    div.classList.remove('hidden');
  }, false);
  e.addEventListener('mouseout', () => {
    d.classList.add('hidden');
  }, false)
});

.hidden {
  display: none;
}

div {
  margin-top: 10px;
  color: red;
}

<button class="btn" data-nr="0">
1
</button>
<button class="btn" data-nr="1">
2
</button>
<button class="btn" data-nr="2">
3
</button>
<div id="d" class="hidden">

</div>