Jquery UI Resizable Aspect Ratio 设置以内容类型为条件答案

【问题标题】：Jquery UI Resizable Aspect Ratio setting conditional on type of contentsJquery UI Resizable Aspect Ratio 设置以内容类型为条件
【发布时间】：2012-10-24 16:30:39
【问题描述】：

我正在构建一个应用程序，其中有不同类型的 div 进入页面。有些用<img> 填充，有些用<span> 填充。所有 div 都有一个名为 draggable 的类。我通过这样做使所有带有可拖动类的 div 都可以调整大小：

        $( '.draggable' ).resizable({
            maxWidth: 500,
            aspectRatio: false,
            containment: 'parent', 
            start: function() {
                last_element = $(this);
            },
            resize: function() {
                $(this).children('img').css('width',$(this).css('width'));
                $(this).children('img').css('height',$(this).css('height'));
            },
            stop: function() {
                updateDiv($(this).attr('id'));
            }
        });

有没有办法让aspectRatio 的值依赖于 div 的内容？我试过这样做：

aspectRatio: ($(this).children('img').length ? true : false),

我希望文本框（其中包含跨度的 div）可以使用 aspectratio = false 调整大小，但图像框（其中包含 imgs 的那些 div）具有 aspectratio = true。

我知道我可以设置两个不同的类（.draggable 和 .draggable_img），但我没有这样做，我只是想知道是否有一些简单的事情我可以在没有冗余代码的情况下完成。

【问题讨论】：

标签： jquery jquery-ui resizable

【解决方案1】：

这是一个上下文问题。 $(this) 正在引用 window 而不是该级别的 .draggable 元素。你可以做的是这样的事情。一旦你这样做了，你设置真/假的逻辑就很好了。

$('.draggable').each(function() {

    $(this).resizable({
        maxWidth: 500,
        aspectRatio: ($(this).children('img').length ? true : false),
        containment: 'parent',
        start: function() {
            //last_element = $(this);
        },
        resize: function() {
            //$(this).children('img').css('width',$(this).css('width'));
            //$(this).children('img').css('height',$(this).css('height'));
        },
        stop: function() {
            //updateDiv($(this).attr('id'));
        }
    });
});

Check out this fiddle.

【讨论】：