javascript - 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").each(function() {
    $(this).resizable({ 
        alsoResize: $(this).find('.child')
    });
});