Javascript 动态事件附件无法正常工作

我正在使用上述JavaScript代码为多个开关滑块项动态创建更改事件。但我面临的问题是，当我单击任何开关时，“I”值都会被最后一个值替换，即在smartActionsId中，我有3个元素，每次开关我都会为最后一个开关更改它的效果（smartActions10）

---

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

在这种情况下，您不能在中为…使用

。请尝试以下代码：

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

var smartActionsId=['smartActions1'，'smartActions5'，'smartActions10']；
对于（变量i=0；i
在这种情况下，您不能将
用于
中的。请尝试以下代码：

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

var smartActionsId=['smartActions1'，'smartActions5'，'smartActions10']；
对于（变量i=0；i
您不希望在
for
循环中附加事件侦听器，因为跟踪索引的变量由每个循环使用。如果这样做，
i
变量将始终等于数组的长度减去1。使用
Array.prototype.forEach（）
来防止这种情况

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

for (var i = 0; i < smartActionsId.length; i++) {
    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)
        }
    });
}

请注意：IE8及以下版本不支持
Array.prototype.forEach（）
您不希望在
for
循环中附加事件侦听器，因为跟踪索引的变量由每个循环使用。如果这样做，
i
变量将始终等于数组的长度减去1。使用
Array.prototype.forEach（）
来防止这种情况

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

for (var i = 0; i < smartActionsId.length; i++) {
    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)
        }
    });
}

请注意：IE8及以下版本不支持
Array.prototype.forEach（）。如果您可以使用它，那么在
.change
功能中您可以使用它

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

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

请记住
中的
this
。更改
函数的
选择没有
id
的
，您必须使用
this.parentNode
或
$（this.parent（）
来获取它的持有者（我想是它的
div
或类似的东西）

@插接式注释是正确的：select可能不是直接的子项。然后您可以使用以下代码：

// if 'smartActionsId' is global variable
// and if you need to get position in 'smartActionsId' array
var numInArray = $.inArray( this.parentNode.id, smartActionsId );
// this - your select DOM object
var ruleIndex = parseInt( this.parentNode.id.split( "_" )[ 1 ] );  

我总是使用像
smartActions\u 1
这样的名称。如果您可以使用它，那么在
.change
功能中您可以使用它

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

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

请记住
中的
this
。更改
函数的
选择没有
id
的
，您必须使用
this.parentNode
或
$（this.parent（）
来获取它的持有者（我想是它的
div
或类似的东西）

@插接式注释是正确的：select可能不是直接的子项。然后您可以使用以下代码：

// if 'smartActionsId' is global variable
// and if you need to get position in 'smartActionsId' array
var numInArray = $.inArray( this.parentNode.id, smartActionsId );
// this - your select DOM object
var ruleIndex = parseInt( this.parentNode.id.split( "_" )[ 1 ] );  

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

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

另外，ruleIndex是根据元素的ID计算的吗？闻起来很臭。
如果它告诉您有关元素的信息，那么它应该位于属性或data-*属性中

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

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

var parent = $( this ).closest( "[id^=smartActions]" );
var numInArray = $.inArray( parent.attr( "id" ), smartActionsId );
var ruleIndex = parseInt( parent.attr( "id" ).split( "_" )[ 1 ] );  

希望能有所帮助。
这里的其他答案解决了您的问题，但我认为您可以稍微重构代码，使其更易于理解

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

另外，ruleIndex是根据元素的ID计算的吗？闻起来很臭。
如果它告诉您有关元素的信息，那么它应该位于属性或data-*属性中

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

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

var parent = $( this ).closest( "[id^=smartActions]" );
var numInArray = $.inArray( parent.attr( "id" ), smartActionsId );
var ruleIndex = parseInt( parent.attr( "id" ).split( "_" )[ 1 ] );  

希望能有所帮助。
请准备一把小提琴..请共享HTMLE无需循环，因为所有回调都是相同的，除了它们引用的
this
（以及您的
ruleIndex
var）。Try
var ruleIndex=$（this.attr（'id'）.substr（11）
@yoavmatchulsky
这个
不引用
#smartActionX
，而是它下面的
选择
。@jack是的，我在我评论后看到了它：\Prepare a fiddle please..Atless share Html不需要循环，因为除了它们引用的
这个
（和你的