jsGears.com 技術論壇 - AJAX, JavaScript, jQuery, 網站開發, 前端效能優化's Archiver

joo 發表於 2015-9-10 15:15

滑鼠移上時修改內容的效果竟然出現錯誤訊息

您好:
我想要做出滑鼠移上時修改內容的效果
這樣在網頁上看是有修改了內容
但打開firebug主控台卻會出現錯誤訊息:TypeError: this.getElementsByTagName(...)[0] is undefined
仔細檢查發現如果在網頁上滑鼠移到<p>元素上時不會有錯誤訊息
但移到<span>上就會產生錯誤訊息
請問這是什麼原因?
謝謝

<div id="nav">
        <p>aaa<span style="margin-left:20px;">000</span></p>
        <p>bbb<span style="margin-left:20px;">111</span></p>
        <p>ccc<span style="margin-left:20px;">222</span></p>
</div>

<script>
var all_p = document.getElementById("nav").getElementsByTagName("p");

// 遍歷每個 p 元素
for(var i=0; i<all_p.length; i++){
        var ppp = all_p[i];
        ppp.original_content = ppp.innerHTML;
        // 移上時
        ppp.onmouseover = function(){
                this.innerHTML = this.getElementsByTagName("span")[0].innerHTML;
        }
        // 移出時
        ppp.onmouseout = function(){
                this.innerHTML = this.original_content;
        }
}
</script>

joo 發表於 2015-9-11 21:17

例如當我滑鼠移上 aaa、bbb 或 ccc 時都正常,
但若是移上 000、111 或 222 時
firebug主控台就會出現錯誤訊息:TypeError: this.getElementsByTagName(...)[0] is undefined
請問有大大知道為什麼會這樣嗎
謝謝

wmh 發表於 2015-9-14 20:49

問題是你為什麼要寫這麼奇怪的程式?

joo 發表於 2015-9-14 21:39

您好:
不好意思,讓您見笑了。
正式上線時會設定 span{display:none;}把 <span> 隱藏起來,
當滑鼠移上 <p> 時才用 <span> 的文字替換掉 <p> 的文字。
但我想了解為何現在滑鼠移上 <span> 時,
firebug主控台會出現錯誤訊息:TypeError: this.getElementsByTagName(...)[0] is undefined,
但移上 <p> 時卻是正常。

wmh 發表於 2015-9-16 08:23

若單純是這樣的需求,建議你改用 CSS 處理即可。[code]
p:hover span {
  display: inline-block;
}
[/code]

joo 發表於 2015-9-16 23:00

您好:
我會再研究看看。
謝謝您的回答。

頁: [1]

Powered by Discuz! Archiver  © 2001-2009 Comsenz Inc.