javascript - 动态事件附件无法正常工作

Question

这个问题已经有答案了:

JavaScript closure inside loops – simple practical example (45 个回答)

已关闭 9 年前。

var smartActionsId = ['smartActions1','smartActions5','smartActions10'];

for (var i in smartActionsId) {
     console.log("smartActionsId ="+smartActionsId[i]);
    $('#' + smartActionsId[i] + ' select').change(function () {
        var value = $(this).val();
        var disableValue;
        var ruleIndex = smartActionsId[i].substr(11);
        console.log("smartActionsId ="+smartActionsId[i]+" i ="+i);
        if (value === '0') {
            disableValue = true;
            onRuleToggle(disableValue, ruleIndex)
        }
        else if (value === '1') {
            disableValue = false;
            onRuleToggle(disableValue, ruleIndex)
        }
    });
}

我正在使用上面的 JavaScript 代码为多个开关 slider 项目动态创建更改事件。但我面临的问题是，当我单击任何开关“i”值时，它会被最后一个值替换，即在 smartActionsId 中，我有 3 个元素，无论哪个开关，我都会更改它对最后一个开关(smartActions10)的效果。

您能帮我解决这个问题吗？

Answer 1

这里的其他答案解决了您的问题，但我认为您可以稍微重构一下代码并使其更容易理解。

首先，我不喜欢 ID。在您的场景中，您有多个 id 需要进行相同的处理。为什么不使用一个强大的类呢？

另外，ruleIndex 是根据元素的 ID 计算出来的？闻起来有腐烂的味道。如果它告诉您有关元素的一些信息，则它应该位于属性或 data-* 属性中。

代码的第一位通过添加 ruleIndex 作为数据属性并添加 .smart-actionable 类来修复标记。 (也许您甚至可以将这部分移至服务器端，以便为自己提供更简单的 JS 标记)。

现在，这使得事件处理变得非常简单。

var smartActionsId = ['smartActions1','smartActions5','smartActions10'];

for (var i in smartActionsId) {
    $('#' + smartActionsId[i])
      .data('ruleIndex', smartActionsId[i].substr(11))
      .addClass('smart-actionable');
}

$('.smart-actionable').on('change', 'select', function() {
    var value = $(this).val();
    var disableValue = (value === '0');
    onRuleToggle(disableValue, $(this).data('ruleIndex'));
});

希望能有所帮助。