0

さまざまな種類のdivがページに表示されるアプリを作成しています。で満たされているものもあれば、で満たされているものも<img>あり<span>ます。すべてのdivには、ドラッグ可能と呼ばれるクラスがあります。これを行うことで、ドラッグ可能なクラスを持つすべての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）のサイズをアスペクト比= falseで変更できるようにしたいと思いますが、画像ボックス（imgが含まれるdiv）のアスペクト比はtrueです。

2つの異なるクラス（.draggableと.draggable_img）をセットアップできることは知っていますが、それを行う代わりに、冗長なコードがなくてもできる簡単なことがあるかどうか疑問に思っています。

4

1 に答える 1

4

これは文脈の問題です。そのレベルの要素の代わりに$(this)参照しています。あなたができることは、このようなものです。これを行うと、true/false を設定するためのロジックは問題ありません。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 に答える