0

私はjqueryの助けを求めています。多くの異なるが同様の名前の要素で使用される .draggable および .sizable の使用を最適化する最良の方法を教えてください。

例えば

    $( "#elem1" ).draggable({

        many lines of code
    });

    $( "#elem2" ).draggable({

        many lines of code
    });

    $( "#elem3" ).draggable({

        many lines of code
    });

    $( "#elem4" ).draggable({

        many lines of code
    });

    ...

    $( "#elem1" ).resizable({

        many lines of code
    });

    $( "#elem2" ).resizable({

        many lines of code
    });

    $( "#elem3" ).resizable({

        many lines of code
    });

    $( "#elem4" ).resizable({

        many lines of code
    });

    ...

数値 1、2、3 などを多目的コードに単純に渡す方法があると確信していますが、要素を個別に実行する必要があることがわかる限り、これを行う方法はわかりません。私は誰かが私にこれを正してくれると確信しています。

よろしくお願いします。

4

3 に答える 3

0
  1. 簡単にターゲットできるように、すべての「elemX」にクラスを追加します。
  2. id を使用して「番号」を取得します
  3. その番号を使用して、必要なことを行います
  4. 利益

オプションがインスタンス化される要素に本当に依存している場合は、それぞれを個別にアクティブ化する必要がありますが、それはコードを少し削減できないという意味ではありません。

$('.yourclass').each(function(){
    var $elem = $(this);
    var num = parseInt( $elem.attr('id').slice(4), 10 );
    $elem.draggable({

        option : "depends on " + num    

    }).resizable({

        option : "depends on " + num    

    });
});
于 2012-01-17T19:10:30.277 に答える
0

コードが特定の要素 Id を参照する文字列のみが異なる場合は、次のようにコードの重複を減らすことができます。

$("#elem1, #elem2, #elem3, #elem4").resizable({
  var id = $(this).attr('id'); //now you can use the ID without hard coding the string.
});

サイズ変更可能なすべての要素が共通のクラスを共有している場合、これをさらにクリーンアップできます。

$(".resizable-element").resizable({
  var id = $(this).attr('id'); //now you can use the ID without hard coding the string.
});

特に整数サフィックスにアクセスする必要がある場合は、その値をdata要素自体の属性として保存できます。

<div id="elem1" data-idSuffix="1" class="resizable-element"></div>

上記のマークアップを使用して、この例をさらに一歩進めると、次のようになります。

$(".resizable-element").resizable({
   var id = $(this).attr('id');
   var idSuffix = $(this).data('idSuffix');
});
于 2012-01-17T19:04:38.023 に答える
0

マークアップによっては、 Attribute Starts With セレクターを使用できる場合があります。

$("[id^=elem]").draggable({
    // your draggable options...
}).resizable({
    // your resizable options...
});
于 2012-01-17T19:05:10.390 に答える