jquery - jQuery resizable()，访问原始对象

Question

这似乎是一件显而易见的事情，但我找不到。使用 resizable 时，我想保存图像的新宽度，但是如何访问刚刚调整大小的图像的 ID 属性？这是我的代码：

$('img.article_image').resizable({
    aspectRatio: true,
    handles: "se",
    stop: function(event, ui){
        // Here I want to access the ID attribute
        // of the img.article_image I am resizing
}});

所以，ui 对象有 ui.helper，我不能使用它。即 ui.helper.attr("id") 或 $(ui.helper).attr("id") 都是未定义的。我也不能使用 $(this).attr("id") ，但是我可以使用 $(this) .width () 来查看新的宽度，所以这很奇怪。

我究竟做错了什么？使用 draggable() 时，我似乎能够以正确的方式访问 $(this)，但不能调整大小......有什么建议吗？

Answer 1

ui 参数保存调整大小的元素

stop: function(event, ui){
 alert(ui.originalElement[0].id);
}

Answer 2

我没有使用可调整大小的插件，但如果它遵循与内置 jQuery 事件相同的准则，那么this将是对受影响的 DOM 元素的引用。所以你可以像这样得到一个 jQuery 包装的对象：

$('img.article_image').resizable({
    aspectRatio: true,
    handles: "se",
    stop: function(event, ui){
        var img = $(this);
        var id = img.attr("id");
}});

Answer 3

在您的情况下，您可以stop使用以下代码在回调中获取 ID：

$('img.article_image').attr('id');

然而，这将复制选择器，但stop回调函数传递的参数没有调整大小的原始对象的记录。