更改 jQuery Resize 中的特定元素调整大小选项

Question

我正在使用 jQueryUI 可调整大小的小部件，并且在页面上有一堆可调整大小的框。当文档加载时，我初始化小部件，如下所示：

$('.ui-draggable').resizable({
    minHeight: 10, // 10 is actually the default
    minWidth: 10, // 10 is actually the default
    resize: function() {
        showProperties(this);
    },
});

但是，在某些时候，我只希望其中一些元素更改调整大小选项。我想要做的是：

if (type == 'sometype')
{
    console.log($('#'+elementID).resizable('option', 'handles'));
    $('#'+elementID).resizable('option', 'handles', 'e,w');
    console.log($('#'+elementID).resizable('option', 'handles'));
}

这确实输出：

e,s,se
e,w

在控制台中，所以触发了事件，选择器是正确的，但是代码实际上并没有起作用：实际上，句柄保持不变，即e，s，se。

这是因为我使用了与原始 init 不同的选择器吗？如果是这样，我如何才能仅在原始可调整大小元素的子集上更改调整大小选项？如果不是，可能是什么问题？

Answer 1

Handles 实际上是添加到应用resizable 的元素的div。似乎更改选项不会刷新这些句柄。也许有一种方法可以将更改应用于特定子集并刷新，但我不确定如何。 但是一种快速的解决方法是隐藏您不想要的句柄，而不是更改handle 选项。您必须将handle 选项设置为您需要的所有句柄，然后隐藏那些不需要的句柄。像这样删除se handle 例如：

$('#'+elementID).find('.ui-resizable-se').hide();