[英]Dynamically warping an image inside an anchor tag [jQuery]
I have a table data like this: 我有一个这样的表数据:
<td id="tinkerDiv1">
<a id="slugTinker1"><img id="imageTinker"></a>
</td>
I am trying to change the image and the anchor link with ajax. 我正在尝试使用ajax更改图像和锚链接。 On the success function of ajax I have:
关于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);
}
Expected Output: 预期产量:
<a id="sluglink1" href="someurl.html">
<img id="imageTinker" class="img-responsive animation-fadeInQuick" style="width:175px;" src="someimage.jpg">
</a>
But I am getting something like this: 但是我得到这样的东西:
<a id="sluglink1" href="someurl.html"></a>
<img id="imageTinker" class="img-responsive animation-fadeInQuick" style="width:175px;" src="someimage.jpg">
Problem: The anchor tag is not wraping the Image tag. 问题:定位标记未包装图像标记。
The issue is with this img.appendTo('#tinkerDiv1');
问题在于此
img.appendTo('#tinkerDiv1');
tinkerDiv1
is the id of the the td. tinkerDiv1
是td的ID。
Replace this with 替换为
$("#sluglink1").append(img)
Please check below code. 请检查以下代码。 It will help you.
它会帮助你。
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');
}
您要附加到div,必须执行此操作
img.appendTo('#slugTinker1');
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.