來自給定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始終是“懸停” li內的第一個div，則可以執行

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

如果這樣做，則在div中不需要任何ID。

Answer 2

朋友nnnnnn的評論解決了我的問題。（也許其他答案也可以）

ID應該是唯一的。 請改用一個類，並使用obj.querySelector（“。classNameHere”）– nnnnnn 12分鍾前

感謝大伙們！