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（）。＆lt;我＆gt;附加在div.ui-wrapper的外部，它的overflow属性被隐藏，所以你必须设置图标的顶部位置。

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

这是my example。我替换了＆lt;我＆gt;与＆lt; img＆gt;

我的代码：

$(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>

在图像顶部添加图标

1 个答案: