javascript - 无法在鼠标悬停事件上加载图像

Question

我有 2 个并排的 div 容器。左边的 div 有一个包含 3 个 li 元素的无序列表。每个 li 都有一个唯一的 ID。我试图在第一个 li 上获得一个 onmouseover 事件，以将 PNG 文件加载到正确的 div 中。

这是 html:

<div class="twoCol">
   <ul class="storeList">
   <li id="level_1">Richmond</li> <!-- mouseover loads png in 2nd div --> 
   <li id="level_2">Santa Maria</li>
   <li id="level_3`enter code here`">Venezula</li>
  </ul>
  </div> 

 <div class="twoCol" id="jsContent">

  <!-- load png into this div via mouseover on ID: level_1  -->

 </div>

这是我的 javaScript:

var storeHours = newObject();
storeHours.img = document.createElement("img");
storeHours.src = "store_hours.png";
storeHours.img.appendChild(storeHours.src);

var liElement1 = document.getElementById("level_1"); // ID for 1st li element

var addContent = document.getElementById("jsContent"); // ID for div to load png

liElement1.onmouseover = function() {
addContent.appendChild(storeHours.img);     
};

Answer 1

首先，您的 JavaScript 中有一个拼写错误:在 var storeHours = newObject(); 中将 new 和 Object 分开。

其次，在 appendChild() 中你必须提供一个节点元素，你用 storeHours.src = "store_hours.png"; 创建的实际上是一个字符串.

你有两个选择:

1. 使用传统的setAttribute()方法:

var storeHours = new Object();
storeHours.img = document.createElement("img");
//storeHours.src = "store_hours.png";
//storeHours.img.appendChild(storeHours.src);
storeHours.img.setAttribute('src', 'store_hours.png');

1. 如果要跟随对象近似，使用setAttributeNode()方法:

var storeHours = new Object();
storeHours.img = document.createElement("img");
//storeHours.src = "store_hours.png";
//storeHours.img.appendChild(storeHours.src);
storeHours.src = document.createAttribute('src');
storeHours.src.value = 'store_hours.png';
storeHours.img.setAttributeNode(storeHours.src);