Question

我正在尝试添加一个功能，当客户点击小缩略图时，它会添加一个图像。见下面的代码。

<html>
<head>

<script type="text/javascript">
<!--

function addimage2() { 
      var img = document.createElement("img");
      img.src = "swatch.jpg"; 
      img.height = 75; 
      img.width = 113;
      img.style.top=800;
      img.style.right=100;
      document.body.appendChild(img);
    }



//-->
</script>
</head>
<body>
    <table width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
       <td width="43%" rowspan="2"><img src="tuffet-diagram.jpg" width="270" height="326"></td>
      <td width="57%" height="162">Zone 1:</td>
   </tr>
  <tr>
      <td>Zone 2: </td>
  </tr>
  <tr>
     <td colspan="2">Zone 1 color:
     <img src="swatch-sm.jpg" alt="swatch-sm" onClick="addimage2();"></td>
  </tr>
  <tr>
     <td colspan="2">Zone 2 color:</td>
  </tr>
</table>
</body>
</html>

它会一直在缩略图旁边添加，而不是在指定位置的位置添加，例如当客户点击Zone1样本时，它应该添加到第1区域等等。

这是指向我的页面的链接：http://www.manufacturingsolutionscenter.org/salma/tuffet-color.html

谢谢。

Answer 1

脚本正在执行您正在指示的操作 - 将新图像附加到文档正文：document.body.appendChild(img);

字面意思是“将这个新元素附加为body标签的子元素”。这会将新标记放在</body>之前。如果要在其他位置添加新图像，请定位要添加的精确位置。

Answer 2

此代码：

document.body.appendChild(img)

确定图像的去向。你需要确定哪个元素应该将图像附加到它上面并将其放在那里。

顺便说一句，如果你使用JQuery，这种类型的文档操作非常容易。

Answer 3

试试这个：

function addimage2(where) { 
  var img = document.createElement("img");
  img.src = "swatch.jpg"; 
  img.height = 75; 
  img.width = 113;
  img.style.top=800;
  img.style.right=100;
  where.parentNode.appendChild(img);
}

和

<img src="swatch-sm.jpg" alt="swatch-sm" onClick="addimage2(this);">

我们的想法是提供必须在函数调用中添加新图像的位置。

Onclick Javascript函数添加图像

3 个答案: