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

Question

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

问题是我只想显示/隐藏任何给定元素的特定内部 div，而不是隐藏整个元素。我确实有很多元素，因此为每个元素手写 javascript 有点愚蠢

我的 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 始终是“hover”li 内的第一个 div，您可以这样做

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

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