Question

正如标题所说，我在使用jquery将图像转换为链接时遇到了一些问题。我现在的代码是：

var all_img =  $(".message .content").find("img");

$.each(all_img, function (index, value) {
    var src = value.src;
    value.replaceWith($("<a href='" + src +"'>Image  " + index+1 + "</a>"));
});

导致图像被[object Object]替换。我也尝试过：

$.each(all_img, function (index, value) {
    var src = value.src;
    value.replaceWith("<a href='" + src +"'>Image  " + index+1 + "</a>");
});

这导致我试图插入的html作为普通的不可点击的文本。我误解了.replaceWith()的工作原理吗？

Answer 1

你无法在.replaceWith()上调用jQuery value方法，你需要使用jQuery对象来定位你需要使用的每次迭代中的当前img $(this)喜欢：

all_img.each(function (index, value) {
    var src = value.src;
    $(this).replaceWith("<a href='" + src +"'>Image  " + index+1 + "</a>");
});

Answer 2

我认为最好创建一个新元素并删除/隐藏img：

$('.turnInAnchor').click(function(e){
  $('img').each(function(index, el) {
     $('body')
    .append("<a href='"+el.src+"' target='_blank'>Image "+index+"</a>");
    el.remove();

  })
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="turnInAnchor">Turn in anchor</button>
<img src="https://upload.wikimedia.org/wikipedia/it/7/75/Twin_Peaks_Episodio_Pilota_Laura_Palmer.png" />

使用指向其内容jquery的链接替换<img/>标记

2 个答案: