动态扭曲锚标签内的图像 [jQuery]答案

【问题标题】：Dynamically warping an image inside an anchor tag [jQuery]动态扭曲锚标签内的图像 [jQuery]
【发布时间】：2017-06-29 13:28:52
【问题描述】：

我有一个这样的表格数据：

<td id="tinkerDiv1">
    <a id="slugTinker1"><img id="imageTinker"></a>
</td>

我正在尝试使用 ajax 更改图像和锚链接。关于ajax的成功功能我有：

success: function(data) {
            console.log('Id:' +data.post.id);
            //var imgname = data.post.image;
            var image = "{{ asset('/frontend/img/uploads/') .'/' }}" + data.post.image;
            var img = $('<img id="imageTinker" class="img-responsive animation-fadeInQuick" style="width:175px;">');
            img.attr('src', image);

            img.appendTo('#tinkerDiv1');
            var slug = "{{ url('/post/') .'/' }}" + data.post.slug;
            var sluglink1 = $('#slugTinker1');
            sluglink1.attr('href', slug);
}

预期输出：

<a id="sluglink1" href="someurl.html">
    <img id="imageTinker" class="img-responsive animation-fadeInQuick" style="width:175px;" src="someimage.jpg">
</a>

但我得到的是这样的：

<a id="sluglink1" href="someurl.html"></a>
<img id="imageTinker" class="img-responsive animation-fadeInQuick" style="width:175px;" src="someimage.jpg">

问题：锚标签没有包裹图片标签。

【问题讨论】：

img.appendTo('#tinkerDiv1'); 更改为附加到不在 div 中的锚点。喜欢img.appendTo('#sluglink1');
我认为this code 会对你有所帮助。祝你好运！
@KRIPS 只是如果您想帮助添加评论，您认为该链接可能对 OP 有所帮助，然后发布链接以供参考。不仅发布一个链接，但没有任何解释它如何帮助 OP。

标签： javascript jquery html ajax

【解决方案1】：

问题在于 img.appendTo('#tinkerDiv1'); tinkerDiv1 是 td 的 id。

替换为

$("#sluglink1").append(img)

【讨论】：

【解决方案2】：

请检查以下代码。它会帮助你。

success: function(data) {
            console.log('Id:' +data.post.id);
            //var imgname = data.post.image;
            var image = "{{ asset('/frontend/img/uploads/') .'/' }}" + data.post.image;
            var img = $('<img id="imageTinker" class="img-responsive animation-fadeInQuick" style="width:175px;">');
            img.attr('src', image);

            var slug = "{{ url('/post/') .'/' }}" + data.post.slug;
            var sluglink1 = $('#slugTinker1');
            sluglink1.attr('href', slug);
            sluglink1.html(img);
            sluglink1.appendTo('#tinkerDiv1');
}

【讨论】：

【解决方案3】：

你正在追加到 div，你必须这样做

img.appendTo('#slugTinker1');

【讨论】：