Jquery 如何动态替换div中的图像

我的问题听起来很简单，但我一直没能解决。 我试图通过链接将一个新的img添加到div标记（#框）中。我遇到的问题是，第一个链接起作用，然后我无法获得第二个链接来替换div标记（#box）中以前的img，我提供了这个希望，它有帮助：

问题在于，您没有更改

#box

的内容，而是试图将新元素附加到已添加的

img

元素中

由于您需要替换

#框

元素中的图像，因此可以使用

在这个场景中，看起来您可以使用

$(function(){
    $("#link1").on("click",function(){
        $("#box").html('<a href="http://www.jasonsanchez.3owl.com"><img src="http://www.jasonsanchez.3owl.com/test/images/dhltest.jpg" alt="dhl" target="_new" style="border:none;"/>');
    });


    $("#link2").on("click",function(){
        $("#box").html('<a href="http://www.jasonsanchez.3owl.com"><img src="http://www.jasonsanchez.3owl.com/test/images/ibmtest.jpg" alt="ibm" target="_new" style="border:none;"/>');
    });

});

display:none;

$（函数（）{
$（“#link1”）。在（“单击”，函数（）上）{
$（“#box”）.html（“
不能附加到
元素

$("#box>img").append

到

作为旁注，该开发帐户可能刚刚因hotlink TOS'ing而终止

单击第二幅图像时，只需更改属性即可

$("#link2").on("click",function(){
    $("#box img").attr('src','http://www.jasonsanchez.3owl.com/test/images/ibmtest.jpg');
});

你可以试试这个

HTML:

根据我使用图像和更改div的经验：

html:

有了它，你可以在同一个div中拥有你喜欢的任意多张图片

PS如果你不喜欢你的img空着你可以用

display:none;

css属性

然后在第一次单击时使用
.show（）；
函数
或者将url设置为某个默认值
是的，但我希望该图像是一个预览。最终，它应该添加一个可以单击打开到另一个窗口的图像。因此，第一次单击是为了预览，如果您单击该图像，它应该转到服务器上的该图像。我必须避免错误的热链接。我将尝试此操作。我会回来的我正要问你这个问题，当你多次按一个链接时，它会不断填充更多的元素。再次感谢！这段代码也是。子字符串（1）是什么意思实际上，这样我就可以理解它在做什么了吗？@ CM8188，如果你看<代码>，我明白了，这是完全有意义的。我要试试这个。谢谢你可以看到当你有无限或未知数量的图像时的价值。谢谢。如果你在为一个客户工作的话，它总是一个好主意，认为会有一个传统的。他会要求你展示的图片或信息，所以（以我的拙见）总是试图让你的代码对你的问题“不具体”，并且容易“升级”点。我会在将来记住这一点。我想这是一个“可伸缩设计”的完美例子。
<p id="link1"><a href="#">image1</a></p>
<p id="link2"><a href="#">image2</a></p>

<br />
<div ><img src="http://www.jasonsanchez.3owl.com/test/images/dhltest.jpg" id="box" >       </a></div>

$("#link1").on("click",function(){
    $('#box').attr("src", "http://www.jasonsanchez.3owl.com/test/images/dhltest.jpg"); 
});


$("#link2").on("click",function(){

   $('#box').attr("src", "http://www.jasonsanchez.3owl.com/test/images/ibmtest.jpg"); 
});

<div id="box"><img id="imgId" src=""></div>

$(function(){
    var url = "";    
    $("#link1").on("click",function(){
            var url = your.url;
            $('#imgId').attr("src", url);
    });


    $("#link2").on("click",function(){
        var url = your.url;
            $('#imgId').attr("src", url);
    });


});

display:none;