将变量从闭包范围传递给 getJSON jQuery 函数

Question

我正在尝试将相同的 jQuery 和 JSON ASP.NET MVC3 方法 附加到两个不同的 <select> 元素：

<select id="StartYear">
<option value="">Select Year</option>
<option value="2000">2000</option>
<option value="2001">2001</option>
</select>

<select id="StartMonth">
<option value="">Select Month</option>
</select>

同样适用于 ID 为 "EndYear" 和 "EndMonth" 的 <select> 元素。

我想将相同的 jQuery 函数附加到“开始年份”和“结束年份”：

$('[id$="Year"]').change(function () {
        var selectedYear = $(this).val();
        var selectedId = $(this).attr('id')
        if (selectedYear != null && selectedYear != '') {
            $.getJSON('@Url.Action("Months")', { year: selectedYear }, function (months) {
                var monthsSelect = $('#StartMonth');
                if (selectedId == 'EndYear') {
                    monthsSelect = $('#EndMonth');
                }
                monthsSelect.empty();
                daysSelect.prepend("<option text='-- select month --' value='' selected='selected'></option>");
                $.each(months, function (index, month) {
                    monthsSelect.append($('<option/>', {
                        value: month.value,
                        text: month.text
                    }));
                });
            });
        }
    });

但是，此代码不起作用。我用 Bugzilla 对其进行了调试，发现这种情况 (selectedId == 'EndYear') 破坏了该功能。变量 selectedId 在闭包范围内，但我不知道如何将其带入函数范围内。否则我不知道这是什么原因。 请记住，如果没有这种情况，代码可以正常工作（当然只是使用#StartMonth）

Answer 1

如果我正确理解您的问题，则可以在 $.getJSON 的成功处理程序内部访问变量 selectedId，但变量的值可能已经被另一个 change 事件更改。

例如，如果两个change 事件将在例如“#EndYear”和“#StartYear”的短时间间隔内声明，则可能如下

1. 将触发“#EndYear”的change 事件
2. selectedId 变量将设置为“EndYear”
3. 将启动第一个$.getJSON
4. change 将触发“#StartYear”事件
5. selectedId 变量将设置为“StartYear”
6. 第二个$.getJSON将被启动
7. 第一个 $.getJSON 将完成，selectedId 变量的值将是 success 处理程序内的“StartYear”
8. 第二个$.getJSON 将完成，selectedId 变量的值将是success 处理程序内的“StartYear”

所以我认为您只需要不同的实例 selectedId 变量来使用$.getJSON 发生之前的值。您可以以不同的方式实现它。将$.getJSON 替换为$.ajax 并使用$.ajax 的context 参数对我来说似乎是最自然的。代码可能如下

$('[id$="Year"]').change(function () {
    var selectedYear = $(this).val();
    var selectedId = $(this).attr('id')
    if (selectedYear != null && selectedYear != '') {
        //$.getJSON('@Url.Action("Months")', {year: selectedYear}, function(months){
        $.ajax({
            url: '@Url.Action("Months")',
            dataType: 'json',
            data: { year: selectedYear },
            context: {selectedId: selectedId},
            success: function (months) {
                var selectedId = this.selectedId; // get from context
                ....
            }
        });
    }
});