jQuery、关联数组和绑定事件答案

【问题标题】：jQuery, associative array and binding eventsjQuery、关联数组和绑定事件
【发布时间】：2012-02-23 06:14:11
【问题描述】：

我想将同一个事件绑定到 3 个复选框，但每次都使用不同的目标：

  var checkboxes = {
    'selector1' : 'target1',
    'selector2' : 'target2',
    'selector3' : 'target3',
  };

  for (selector in checkboxes) {
    var target = checkboxes[selector];

    if (jQuery(selector).is(':checked')) {
      jQuery(target).show();
    }
    else {
      jQuery(target).hide();
    }

    jQuery(selector).bind('change', function() {
      if ($(this).is(':checked')) {
        jQuery(target).show();
      }
      else {
        jQuery(target).hide();
      }
    });
  };

但它不起作用：在“更改”时，3 个选择器显示/隐藏第三个目标。

【问题讨论】：

该构造 {'key': 'value'...} 在 JavaScript 中称为 Object Literal，而不是关联数组。
target1等指的是什么？复选框 id 属性？
@Michael：嗯，语法被称为对象字面量。代码创建了一个对象，它是一个关联数组。

标签： javascript jquery loops closures

【解决方案1】：

target 范围是问题！

你可以有更简单的代码：

为处理程序使用数据

使用.toggle(condition)

$.each(checkboxes, function(selector, target) {
    $(selector).on('change', {target:target}, function (evt) {
        $(evt.data.target).toggle($(this).is(':checked'));
    }).change();
});

【讨论】：

当然前提是没有其他代码在这些元素上使用更改事件，因为您在没有更改时触发事件。

【解决方案2】：

这是因为事件处理程序中的代码将使用变量target，而不是创建事件处理程序时的变量值。当事件处理程序运行时，该变量将包含循环中使用的最后一个值。

使用匿名函数创建一个闭包，捕获变量的值：

for (selector in checkboxes) {
  var target = checkboxes[selector];

  if (jQuery(selector).is(':checked')) {
    jQuery(target).show();
  } else {
    jQuery(target).hide();
  }

  (function(target){

    jQuery(selector).bind('change', function() {
      if ($(this).is(':checked')) {
        jQuery(target).show();
      } else {
        jQuery(target).hide();
      }
    });

  })(target);

};

旁注：您可以使用toggle 方法使代码更简单：

for (selector in checkboxes) {
  var target = checkboxes[selector];

  jQuery(target).toggle(jQuery(selector).is(':checked'));

  (function(target){

    jQuery(selector).bind('change', function() {
      jQuery(target).toggle($(this).is(':checked'));
    });

  })(target);

};

【讨论】：

为什么投反对票？如果你不解释你认为错误的地方，它就无法改进答案。
非常感谢，效果很好（也感谢您的切换）

【解决方案3】：

它不起作用，因为target 不在函数内部。块不提供 javascript 中的范围。

但我已经为你减少了它，希望这会奏效：

$.each(checkboxes, function(selector, target) {
   $(selector).change(function () {
       $(target).toggle($(selector).is(':checked'));
   }).trigger('change');
});

【讨论】：

当然前提是没有其他代码在这些元素上使用更改事件，因为您在没有更改时触发事件。