2

2 つの要素change()の jQuery でイベントをキャッチしようとしています。select同じコードをカットアンドペーストする必要がないように、ループで実行しようとしています。

ただし、この行には問題がありますvar x = $("#"+fields[i]).val();

fields = ['foo', 'bar'];

for (var i=0; i < fields.length; i++)
{
    $("#"+fields[i]).change(function () {
            var x = $("#"+fields[i]).val();
            alert(x);
    });
}

<form>
    <select id="foo">
        <option value="first">first</option>
        <option value="second">second</option>
    </select>
    <select id="bar">
        <option value="third">third</option>
        <option value="fourth">fourth</option>
    </select>
</form>

http://jsfiddle.net/mLc5p/6/

編集

申し訳ありませんが、それは非常に単純化された例でした。私は実際に、たくさんのカットアンドペーストを行うことなく、近くのフィールドをたくさん取得したいと考えています。これが私の実際のコードです：

var fieldnames = ['start_date', 'end_date']
for (var i=0; i < fieldnames.length; i++)
{
    var fieldname = fieldnames[i];

$("#event_"+fieldname+"_date, #event_"+fieldname+"_hour, #event_"+fieldname+"_minute, #event_"+fieldname+"_ampm").change(function(){

    var d = $("#event_"+fieldname+"_date").val();
    var h = $("#event_"+fieldname+"_hour").val();
    var m = $("#event_"+fieldname+"_minute").val();
    var ampm = $("#event_"+fieldname+"_ampm").val();

    $("#event_"+fieldname).val(d + ' ' + h + ':' + m + ampm);

    if ( $("#event_"+fieldname).val() == " :" ){
        $("#event_"+fieldname).val("");
    }

    if (fieldname == "start_date")
    {
        $.validator.methods.validMoment.call(this, $("#event_"+fieldname).val(), $("#event_"+fieldname), null);
    }else
    {
        $.validator.methods.validOptionalMoment.call(this, $("#event_"+fieldname).val(), $("#event_"+fieldname), null);
    }
});

}

Javascript でトリックを行うことを心配する代わりに、Ruby でコードを生成するだけでよいと思いますが、興味があります...

4

7 に答える 7

1

$.each繰り返しに使用してください。

var fields = ['foo', 'bar'];

$.each(fields, function(idx, field){
     $("#"+field).change(function () {
            var x = $("#"+field).val();
            alert(x);
    });
});

http://jsfiddle.net/mLc5p/12/

これにより、スコープの問題が修正されます。問題はi、通常の for ループ反復の後に 2 になり、i反復ごとにスコープに保存されないことです。ハンドラーの実行時の最後iは常に 2 になり$.eachます。すべての反復のスコープが自動的に分離されます。

完全を期すために、この問題に対する jQuery 以外のソリューションは次のとおりです。

var fields = ['foo', 'bar'];

for (var i=0; i < fields.length; i++){
    (function(i){
       $("#"+fields[i]).change(function () {
            var x = $("#"+fields[i]).val();
            alert(x);
        });
    })(i);
}

基本的に上記のソリューションと同じ効果があります。あなたのコードは関数内にラップされており、 i は自己実行関数の引数として関数スコープに「接着」されています。

于 2013-08-02T11:18:50.903 に答える