4

カスタムjquery関数を適用したいテキストボックスがいくつかあります。

jQuery.fn.setReadOnly = function () {
    var o = $(this[0]);
    o.prop('readonly', true)
    .css('background-color', '#F0F0F0');
};

今私はする必要があります：

$('#txt1').setReadOnly();
$('#txt2').setReadOnly();
$('#txt3').setReadOnly();
$('#txt4').setReadOnly();
$('#txt5').setReadOnly();

私は次のことを達成したい：

$('#txt1, #txt2, #txt3, #txt4, #txt5').setReadOnly();

ありがとうございました。

4

5 に答える 5

7

あなたの場合、あなたはただ使うことができますthis-それはすでに提供された要素のそれぞれに一致するjQueryオブジェクトです：

jQuery.fn.setReadOnly = function() {
    return this.prop('readonly', true).css('background-color', '#f0f0f0');
}

コレクション全体でjQuery関数を呼び出す以外に、各DOM要素で明示的に何かを実行したい場合は、次のようにします。

jQuery.fn.myFunc = function() {
     return this.each(function() {
         ...
     });
});

.propと.css呼び出しは.each暗黙的に実行されるため、特定のケースではこれは不要です。

于 2012-11-26T14:51:18.213 に答える
1

現在、明示的に設定しています$(this[0])。これは、最初の要素にのみアクセスします。

使いたいo = $(this);

デモ

編集：Alnitakが指摘しているthisように、jQueryコレクションになりthis.prop(...)、余分な$()ラッピングなしですぐに実行できます。

于 2012-11-26T14:50:41.403 に答える
1

通常、一致するすべての要素に適用するための構文は次のようになります。

jQuery.fn.setReadOnly = function () {
    return this.each(function () {
        $(this).prop("readonly", true).css("background-color", "F0F0F0");
    });
};

.each一致するすべてのアイテムを反復処理するためにメソッドを使用する必要はありませんが、このプラグインを拡張してさらに多くのことを行い、jQueryメソッド（およびパーツ）thisの外部の各要素に適用する必要がある場合は、これが正しい使用方法です。。propcss

于 2012-11-26T14:51:23.543 に答える
0

私の賛成票を参照してください：this.eachを使用してください-それはより良く、オブジェクトチェーンに戻ります。

あなたが最初のアイテムをつかんでいる'this'オブジェクト-単にそれをループします：

for(var i = 0, len = this.length; i<len; i++){
    var o = $(this[i]);
    o.prop('readonly', true)
    .css('background-color', '#F0F0F0');
}

テストされていませんが、私はそれがうまくいくと確信しています。

于 2012-11-26T14:52:03.610 に答える
0

これはあなたがそれを書く方法です

チェーンすることを忘れないでください。

jQuery.fn.setReadOnly = function () {
    // return 'this' for chaining purposes
    return this.prop("readonly", true)
               .css("background-color", "#f0f0f0");
    });
};
于 2012-11-26T14:53:39.490 に答える