Question

我的问题听起来很简单，但我无法弄清楚。我正在尝试通过链接将新的img添加到div标签（#box）中。我遇到的问题是第一个链接工作，然后我无法获得第二个链接来替换名为（#box）的div标签中的前一个img我已经提供了这个希望它有所帮助：

<body>
<p id="link1"><a href="#">image1</a></p>
<p id="link2"><a href="#">image2</a></p><br />
<div id="box"></div>
</body>

Answer 1

问题是，您尝试将新元素附加到已添加的#box元素

，而不是更改img的内容。

由于您需要更换#box元素中的图片，因此您可以使用.html()

在这种情况下，看起来你可以使用

$(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;"/>');
    });

});

演示：Fiddle

Answer 2

您无法附加到<img/>元素。

$("#box>img").append

到

$('#box').append

作为旁注，该开发帐户可能刚刚终止了热链接TOS'ing

Here's the jsFiddle

Answer 3

您可以在点击第二张图片时更改属性。

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

Answer 4

你可以试试这个......

HTML：

<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>

JS：

$("#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"); 
});

Answer 5

根据我对使用更改div的图像的体验：

HTML：

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

和jQuery：

$(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);
    });


});

并且你可以拥有与你在同一个div中改变一样多的图片

PS如果你不喜欢你的img beeing空载，你可以使用

display:none;

css属性

然后在第一次点击时使用.show();功能或将url设置为某个默认值

如何动态替换div中的图像

5 个答案: