Javascript 添加图像覆盖时出现问题（jQuery）

我想做的是找到所有具有特定类名的图像，并在其上放置一个覆盖图像。到目前为止，我在jQuery 1.2.6中的脚本是：

jQuery.noConflict();
jQuery(document).ready( function($) {
  var module = $(".module-contactus div div div");
  module.find("img.let").each( function() {
    var iWidth = $(this).width();
    var iHeight = $(this).height();
    var letimg = $('<img src="/LET.png" style="position: absolute; top: 50%; left: 50%; margin-top: -' + Math.ceil(iHeight/2) + 'px; margin-left: -' + Math.ceil(iWidth/2) + 'px;" />');
    var wrapper = $( '<span style="position: relative; display: inline-block;"></span>' );
    $(this).wrap( wrapper );
    letimg.appendTo( wrapper );
  });
});

运行脚本后，第二个图像将替换为：

<span style="position: relative; display: inline-block;">
<img class="let" src="/contact2.jpg" />
</span>

但是，结果应该是这样的：

<span style="position: relative; display: inline-block;">
<img class="let" src="/contact2.jpg" />
<img src="/LET.png" style="..." />
</span>

这对我很有用：

jQuery.noConflict();
jQuery(function($) {
    $("img.let", $(".module-contactus div div div")).each(function() {
        var iWidth = $(this).width();
        var iHeight = $(this).height();
        var letimg = '<img src="http://www.roomsinworcester.co.uk/images/stories/LET.png" style="position: absolute; top: 50%; left: 50%; margin-top: -' + Math.ceil(iHeight/2) + 'px; margin-left: -' + Math.ceil(iWidth/2) + 'px;" />';
        var wrapper = $('<span style="position: relative; display: inline-block;"></span>');
        $(this).wrap(wrapper).after(letimg);
    });
});

jQuery.noConflict（）；
jQuery（函数（$）{
$（“img.let”，$（.module contactus div”）。每个（函数（）{
var iWidth=$（this）.width（）；
var iHeight=$（this）.height（）；
var letimg=''；
var包装器=$（''）；
$（this.wrap（wrapper.after）（letimg）；
});
});

作为旁注。我取出了几个变量，并说您可能会继续删除其他变量（将img标记直接放在after中，将包装器直接放在wrap函数中，等等）。不过这两种方式都没什么大不了的。

这对我来说很有效：

jQuery.noConflict();
jQuery(function($) {
    $("img.let", $(".module-contactus div div div")).each(function() {
        var iWidth = $(this).width();
        var iHeight = $(this).height();
        var letimg = '<img src="http://www.roomsinworcester.co.uk/images/stories/LET.png" style="position: absolute; top: 50%; left: 50%; margin-top: -' + Math.ceil(iHeight/2) + 'px; margin-left: -' + Math.ceil(iWidth/2) + 'px;" />';
        var wrapper = $('<span style="position: relative; display: inline-block;"></span>');
        $(this).wrap(wrapper).after(letimg);
    });
});

jQuery.noConflict（）；
jQuery（函数（$）{
$（“img.let”，$（.module contactus div”）。每个（函数（）{
var iWidth=$（this）.width（）；
var iHeight=$（this）.height（）；
var letimg=''；
var包装器=$（''）；
$（this.wrap（wrapper.after）（letimg）；
});
});

---

作为旁注。我取出了几个变量，并说您可能会继续删除其他变量（将img标记直接放在after中，将包装器直接放在wrap函数中，等等）。不过，这也没什么大不了的。

我不确定你是否需要包装纸

试试这样的

jQuery(document).ready( function($) {
    var module = $(".module-contactus div div div");
    module.find("img.let").each( function() {                
        var iWidth = $(this).width();                
        var iHeight = $(this).height();                
        var letimg = $('<img src="http://www.roomsinworcester.co.uk/images/stories/LET.png" style="position: absolute; top: 50%; left: 50%; margin-top: -' + Math.ceil(iHeight/2) + 'px; margin-left: -' + Math.ceil(iWidth/2) + 'px;" />');                
        $(this).before(letimg);         
        alert(module.html());
    });
  });

jQuery（文档）.ready（函数（$）{
变量模块=$（“.module contactus div”）；
module.find（“img.let”）.each（function（）{
var iWidth=$（this）.width（）；
var iHeight=$（this）.height（）；
var letimg=$（''）；
美元（本）。之前（mg）；
警报（module.html（））；
});
});

我不确定您是否需要包装器

试试这样的

jQuery(document).ready( function($) {
    var module = $(".module-contactus div div div");
    module.find("img.let").each( function() {                
        var iWidth = $(this).width();                
        var iHeight = $(this).height();                
        var letimg = $('<img src="http://www.roomsinworcester.co.uk/images/stories/LET.png" style="position: absolute; top: 50%; left: 50%; margin-top: -' + Math.ceil(iHeight/2) + 'px; margin-left: -' + Math.ceil(iWidth/2) + 'px;" />');                
        $(this).before(letimg);         
        alert(module.html());
    });
  });

jQuery（文档）.ready（函数（$）{
变量模块=$（“.module contactus div”）；
module.find（“img.let”）.each（function（）{
var iWidth=$（this）.width（）；
var iHeight=$（this）.height（）；
var letimg=$（''）；
美元（本）。之前（mg）；
警报（module.html（））；
});
});

若要查看发生了什么，我们需要查看标记。若要查看发生了什么，我们需要查看标记。是的，我确实需要包装，因为否则无法将覆盖正确定位在图像上。是的，我确实需要包装，因为否则无法将覆盖正确定位在图像上。谢谢，它成功了！我应该已经发现，因为我有$（这）的图像，我可以简单地添加覆盖后，它！谢谢，成功了！我应该已经发现，因为我有$（这）的图像，我可以简单地添加覆盖后，它！