jquery - 在图像顶部附加图标

Question

我想将图像附加到另一个图像上，但它不起作用。

这是我的代码：

$(document).on('mousedown', '.step-wrapper img', function() {      
    $(this).resizable();
    $(".ui-wrapper").draggable();  
    $(this).find(".ui-wrapper").append('<i class="icon-sort-up"></i>');
    $(".icon-sort-up").css("position", "absolute")
});

Answer 1

.ui-wrapper 不是 $(this) 的后代，而是 parent，所以使用 parent() 而不是 find()。< I > 附加在 div.ui-wrapper 之外，并且它的溢出属性是隐藏的，因此您必须设置图标的顶部位置。

将可调整大小和可拖动的函数移动到 document.ready 会更好，因为每次单击 img 时这些函数都会创建 div。

这是我的例子。我将 <i> 替换为 <img>

我的代码：

$(document).ready(function(){
    $('.step-wrapper img').resizable();
    $(".ui-wrapper").draggable().append('<img class="icon-sort-up" src="http://thesimpsonplace.e-monsite.com/medias/album/images/76278889donut-1-jpg.jpg"/>');  
});

$(document).on('mousedown', '.step-wrapper img.homer', function(){
    $(".icon-sort-up").css("z-index",1);
});

CSS：

img.homer{
    width:100px;
    height:100px;
    cursor:pointer;
    position:relative;
}
img.icon-sort-up{
    width:15%;
    height:15%;
    position:absolute;
    top:0px;
    z-index: -1;
}

html:

<div class="step-wrapper">
<img class="homer" src="http://www.boston.com/business/ticker/homer616.jpg"/>
</div>