Question

我正在构建一个应用程序，我有不同类型的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），但不是这样做，我只是想知道是否有一些简单的事情我可以做而没有冗余代码。

Answer 1

这是一个背景问题。 $(this)引用window而不是该级别的.draggable元素。你能做的就是这样。一旦你这样做，你设置true / false的逻辑就可以了。

$('.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

Jquery UI可调整大小宽高比设置取决于内容类型

1 个答案: