Question

我们有这个jquery实用程序代码，只要它有ID，就会自动为任何UI元素添加事件处理程序。例如，如果我有这个元素：

<button id="compute-bills">Compute</button>

而不是写这个给它一个onClick听众：

$(function() {
    $("#compute-bills").on("click", function() {
        // function body
    });
});

我们的团队使用此代码：

var computeBillsOnClick = function() {
    // function body
}

现在，介绍我的问题，我有这个场景：

<input type="hidden" class="geonameId" name="geonameId">
<input type="text" class="geonameLocation" name="geonameLocation" id="geoname-location">
...
<input type="hidden" class="geonameId" name="mondayGeonameId">
<input type="text" class="geonameLocation" name="mondayGeonameLocation" id="monday-geoname-location">
...
<input type="hidden" class="geonameId" name="tuesdayGeonameId">
<input type="text" class="geonameLocation" name="tuesdayGeonameLocation" id="tuesday-geoname-location">
...
<input type="hidden" class="geonameId" name="wednesdayGeonameId">
<input type="text" class="geonameLocation" name="wednesdayGeonameLocation" id="wednesday-geoname-location">
...
<input type="hidden" class="geonameId" name="thursdayGeonameId">
<input type="text" class="geonameLocation" name="thursdayGeonameLocation" id="thursday-geoname-location">
...
<input type="hidden" class="geonameId" name="fridayGeonameId">
<input type="text" class="geonameLocation" name="fridayGeonameLocation" id="friday-geoname-location">
<!-- Plus some 20-ish similar nodes-->

.geonameLocation类的每个元素实际上都是一个自动完成字段（使用单独的插件），当填充时，将设置该字段之前的.geonameId的值。使用我们的简写表示法，我们像这样分配.geonameId的值：

var geonameLocationOnAutoComplete = function() {
    var geonameLocation = $("#geoname-location");
    var geonameId = geonameLocation.prev();

    // Do some magic
    // var id = ...

    geonameId.val(id);
};
//...
var fridayGeonameLocationOnAutoComplete = function() {
    var geonameLocation = $("#friday-geoname-location");
    var geonameId = geonameLocation.prev();

    // Do some magic
    // var id = ...

    geonameId.val(id);
};

因此，我没有重复代码，而是考虑将函数的声明放在循环中：

var geonames = [
    "geoname-location",
    "monday-geoname-location",
    // ...
    "friday-geoname-location",
    // plus 20-ish other ID that implements the same callback.
];

for(var x = 0; x < geonames.length; x++) {
    var geonameLocation = $("#" + geonames[x]);
    var geonameId = geonameLocation.prev();

    window[geonames[x].toCamelCase() + "OnAutoComplete"] = function() {
        console.log(geonameLocation); // undefined
        console.log(geonameId); // undefined

        // Do some magic
        // var id = ...

        geonameId.val(id);
    };
}

问题是geonameLocation和geonameId变量在函数体中是未定义的。因此，我不能在我正在执行的过程中使用它们。我想知道这背后的原因，如果我可以使用这种方法在循环中声明一个函数。

编辑：我将事件从onBlur更改为自定义事件，因为我的案例实际上不是正常事件，因此无法使用此代码访问触发元素：

var geonameLocation = $(e.target);

Answer 1

我会改为：

geonameBlur = function(name) {
  var geonameLocation = $('#' + name);
  var geonameId = geonameLocation.prev();
 ... do the needfull ...
}

然后你可以： window["fridayGeonameLocationBlur"] = function() { geonameBlur('friday-geoname-location'); }作为事件

在循环中声明函数

1 个答案: