Question

我正在尝试使用jquery或javascript将多个图像加载到DIV中。

例如：

点击image1后，image1将被加载到DIV容器中，单击image2后，image2将加载到DIV容器中，image1将被删除。单击image3时，image3将加载到DIV容器中，并删除上一个图像。等等......

我有以下代码，但没有做任何事情：

的javascript：

<script type = "text/javascript">
function changeImg() {
    document.getElementById("img1").innerHTML="<img src='badges/legal2.png' />";
}
</script>

HTML：

  <img style="margin-left:10px; margin-top:10px; float:left;" src="badges/legal1.png" width="54" height="123" onclick="changeImg();" />
  <img style="margin-left:10px; margin-top:10px; float:left;" src="badges/legal2.png" width="54" height="123" onclick="changeImg();"/>

<div id="apDiv1"><img id="img1" src="badges/legal1.png" width="73" height="140" /></div>

有人可以帮助我吗？

编辑：

我将我的代码更改为以下内容，现在只加载一个图像..我需要知道如何只使用一个javascript函数加载特定图像：

<script type = "text/javascript">
function changeImg() {
    document.getElementById("apDiv1").innerHTML="<img src='badges/legal2.png' />";
}
</script>

Answer 1

innerHTML是标记内的html。例如，<div id="someid">some html</div>的内部HTML是some html。

img标记没有结束标记，因此它不具有内部HTML。

你想使用这样的东西：

document.getElementById("img1").setAttribute("img", "badges/legal2.png")

另请注意， id属性是唯一的，也就是说，您不能在多个元素中对id使用相同的值。您的代码会为apDiv1和<div>代码分配<img>的ID。看起来您打算使用img的ID作为<img>标记，因为这是您在JavaScript中使用的内容。

Answer 2

您正在尝试查找ID为＃34; img1＆＃34;并且没有此ID的元素。

确保所有id都是唯一的，并在document.getElementById（）函数中输入正确的id。如果你要更改innerHtml，你应该查找包装你的img标签的div。

然后它应该工作。

Answer 3

将图像添加到课程＆＃34; myImg＆＃34;。 div中的图像src将在点击时更改。请参阅HTML代码：

<img class="myImg" style="margin-left:10px; margin-top:10px; float:left;" src="badges/legal1.png" width="54" height="123" />
  <img class="myImg" style="margin-left:10px; margin-top:10px; float:left;" src="badges/legal2.png" width="54" height="123"/>
<div id="apDiv1"><img id="showImg" width="73" height="140" /></div>

文档准备好后，

$(".myImg").click(function(){
    var imgSrc = $(this).attr("src");
    $("#showImg").attr("src",imgSrc);
});

Answer 4

使用jQuery这很容易。

http://jsfiddle.net/gL6qC/

$('document').ready(function(){
    $('img').on('click', function(){
       $('#apDiv1').html($(this).clone()); 
    });
});

使用javascript或jquery在点击时加载多个图像？

4 个答案: