Question

我正在尝试编写一个小脚本，当鼠标翻过/跳出时会自动显示/隐藏div的内容。我想做的是让标题可见，当有人鼠标悬停在标题上时，可以看到更多文字。

问题是我想显示/隐藏任何给定元素的特定内部div而不是隐藏整个元素。我确实有很多元素，所以为每一个手写javascripts都有点傻了

我的HTML代码如下：

<li id="job1" onmouseover ="div2mouseover(this)"  onmouseout="div2mouseout(this)">
    <div style = "display:none" id="jobDescription">
        <p> Blablabla</p>
     </div>
<li>

我的JavaScript代码如下：

<script type="text/javascript">

   function div2mouseover(obj) 
   {
        //obj.style.display = "none"; //I can reach that
        obj.getElementById("jobDescription").style.display = "initial"; //I can't reach that
   }
 </script>

所以使用obj.style.display我可以编辑任何给定元素的可见性，但是我无法达到我想要达到的内部div。

我已经设法为这样的单个元素做到了这一点：

document.getElementById("jobDescription").style.display = "initial";

但是通过这种方式，我必须为我的所有工作元素编写一个脚本，这很多。有什么建议??

Answer 1

您也可以按位置引用元素。

例如，如果要显示的div始终是＆＃34; hover＆＃34;中的第一个div。你能做什么

function div2mouseover(obj) {
  var div = obj.getElementsByTagName("div")[0];
  div.style.display = "initial";
}

如果你这样做，你就不需要div中的任何ID。

Answer 2

朋友nnnnnn的评论解决了我的情况......（也许其他答案可能也有效）

ID应该是唯一的。改为使用类，并使用obj.querySelector（＆＃34; .classNameHere＆＃34;） - nnnnnn 12分钟前

谢谢你们！

Javascript从给定的Javascript对象参数访问嵌套的HTML元素

2 个答案: