javascript - jQuery 中的变量范围问题

Question

我试图在 jQuery 中为两个 select 元素捕获 change() 事件。我正在尝试循环执行此操作，这样我就不必剪切和粘贴相同的代码。

尽管 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);
    }
});

我想我可以只用 Ruby 生成代码，而不必担心用 Javascript 做任何技巧，但我很好奇...

Answer 1

你应该把它改成

$("#"+fields[i]).change(function () {
        var x = this.value;
        alert(x);
});

对于您的代码，问题是无论您更改什么字段，您都将始终显示最后一个字段的值(由于 for 循环)。换句话说:当 change 事件发生时，alert 语句中 fields[i] 的值始终显示 最后一个字段 未定义(Chris 正确地提醒我)。

作为旁注，无需使用 jQuery:您可以使用 this.value