Jquery的可调整大小与子类不能正常工作

Question

由于某些原因，为子标题调整大小无法正常工作。

<div class="parent"><img class="child"></div>
<div class="parent"><img class="child"></div>
<div class="parent"><img class="child"></div>

当我尝试$(".parent").resizable( {alsoResize: ".child"});然后调整大小发生，但它调整所有图像的大小，而不是相应的图像。

当我尝试

$(".parent").resizable({ alsoResize: $(this).closest('.child') });

或

$(".parent").resizable({ alsoResize: $(this).find('.child') });

则只有div在调整大小，而不是里面的图像。为什么会这样呢?

当我使用$(".child").resizable();时，<div class="ui-wrapper" >也会出现，它变成

<div class="parent"> 
    <div class="ui-wrapper"><img class="child ui-resizable"></div>
</div>

但是这里的问题是img没有显示，因为display none是自动到来的，ui-wrapper类的宽度和高度没有设置或设置为0。请帮忙找出问题所在

Answer 1

首先你的选择器是不正确的;你漏掉了.前缀。其次，this不指向.parent元素，它指向正在创建事件处理程序的范围。要解决这个问题，您可以遍历.parent元素并将事件单独附加到它们上。试试这个:

$(".parent").each(function() {
    $(this).resizable({ 
        alsoResize: $(this).find('.child')
    });
});