1

我的问题听起来很简单，但我无法弄清楚。我正在尝试通过链接将新的 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>
4

5 回答 5

0

问题不是更改 的内容#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;"/>');
    });

});

演示：小提琴

于 2013-07-29T02:57:42.760 回答
0

您不能附加到<img/>元素。

$("#box>img").append

到

$('#box').append

附带说明一下，该开发帐户可能刚刚因热链接 TOS'ing 而被终止

这是jsFiddle

于 2013-07-29T02:58:00.333 回答
0

您可以在单击第二张图像时更改属性。

$("#link2").on("click",function(){
    $("#box img").attr('src','http://www.jasonsanchez.3owl.com/test/images/ibmtest.jpg');
});
于 2013-07-29T03:04:59.317 回答
0

你可以试试这个。。

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"); 
});
于 2013-07-29T03:09:01.253 回答
0

根据我对更改 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在加载时是空的，你可以使用

display:none;

css 属性

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

于 2013-07-29T13:10:08.200 回答