0

私はJSを初めて使用し、CMSを実行しています。動的IDを持っています。私の懸念は、IDの配列を追加してJSコードを減らすためにIDを簡素化することです。

このコードを単純化する方法を教えてください

$x1(document).ready(function () {

    //
    // Id1 = #options_1_text
    // Id2 = #option_2_text
    // Id3 = #option_3_text
    // Id(n) = so on..

    $x1("#options_1_text").miniColors({
        letterCase: 'uppercase',
        change: function (hex, rgb) {
            logData('change', hex, rgb);
        }
    });


    $x1("#options_2_text").miniColors({
        letterCase: 'uppercase',
        change: function (hex, rgb) {
            logData('change', hex, rgb);
        }
    });


    $x1("#options_3_text").miniColors({
        letterCase: 'uppercase',
        change: function (hex, rgb) {
            logData('change', hex, rgb);
        }
    });

    // so on..

});

あなたの助けは大歓迎です！

ありがとう！

4

6 に答える 6

1

これを試して：

$x1(document).ready(function () {
    var ids = [
        "#options_1_text",
        "#options_2_text",
        "#options_3_text",
        "#options_4_text",
        .
        .
        .
        .
        ."#options_n_text",
    ];
    $x1.each(ids, function(i, el){
        $x1(el).miniColors({
            letterCase: 'uppercase',
            change: function (hex, rgb) {
                    logData('change', hex, rgb);
            }
        });

    });

});
于 2012-07-20T04:14:38.257 に答える
0

コードがすべての要素に対して実際に同じことを行う場合:

 for (var i=1; i<4; i++) {
    $x1("#options_"+i+"_text").miniColors({
                letterCase: 'uppercase',
                change: function(hex, rgb) {
                    logData('change', hex, rgb);
                }
            });
 }

IDがそのような単純なシーケンスでない場合

 var ids = [ 'id1', 'another_id', 'one_more' ];

その配列をループします。

于 2012-07-20T04:11:12.193 に答える
0 
  var str='',n=4;
for (var i=1; i<n; i++) {
    str+=",#options_"+i+"_text";
                         }
 str[0]='';

$x1(str).miniColors({
        letterCase: 'uppercase',
        change: function (hex, rgb) {
            logData('change', hex, rgb);
        }
    });
于 2012-07-20T04:14:18.253 に答える
0

ここでの最も簡単な方法は、これらの各項目に共通のクラスを追加し、jQuery にすべての作業を任せて、次のようにすることです。

$x1(document).ready(function () {

    $x1(".options_text").miniColors({
        letterCase: 'uppercase',
        change: function (hex, rgb) {
            logData('change', hex, rgb);
        }
    });

});

HTML を変更できず、項目が 1 から順に番号付けされていると想定できる場合は、既存の要素を動的に探すことができます。

$x1(document).ready(function () {
    var i = 1, elem;
    while (elem = document.getElementById("options_" + i + "_text")) {
        $x1(elem).miniColors({
             letterCase: 'uppercase',
             change: function (hex, rgb) {
                 logData('change', hex, rgb);
             }
        });
        i++;
    }
});
于 2012-07-20T04:17:47.210 に答える
0

それが単純なパターンで、要素の数 n がわからない場合は、次のようにすることができます。

var n = 1;
while($('#options_'+n+'_text').length > 0)
{
    $x1('#options_'+n+'_text').miniColors({
        letterCase: 'uppercase',
        change: function (hex, rgb) {
            logData('change', hex, rgb);
        }
    });
    n++;
}
于 2012-07-20T04:18:11.907 に答える
0

さて、ここに構造化されたものがあります：

$x1(document)
.ready(function () {
$x1("#options_1_text")
    .miniColors({
    letterCase: "uppercase",
    change: function (a, b) {
        logData("change", a, b)
    }
}), $x1("#options_2_text")
    .miniColors({
    letterCase: "uppercase",
    change: function (a, b) {
        logData("change", a, b)
    }
}), $x1("#options_3_text")
    .miniColors({
    letterCase: "uppercase",
    change: function (a, b) {
        logData("change", a, b)
    }
})
})
于 2012-11-09T00:26:25.323 に答える