0

我正在构建一个应用程序，其中有不同类型的 div 进入页面。有的用 a 填充，<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),

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

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

4

1 回答 1

4

这是一个上下文问题。$(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'));
        }
    });
});​

看看这个小提琴。

于 2012-10-24T17:33:01.167 回答