访问原始对象的jQuery resizable()

Question

这似乎是件显而易见的事，但我找不到。使用可调整大小时，我希望保存图像的新宽度，但是如何访问刚才调整大小的图像的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回调函数传递的参数没有调整大小的原始对象的记录。