javascript - jQuery for 循环在 Drupal 行为中无法识别闭包中的变量...？

Question

谁能告诉我为什么这可能行不通

Drupal.behaviors.toggleGroups = {
  attach:function(context, settings) {
    for (var i = 1; i < 8; i++) {
      $('#edit-group-' + i.toString() + '-toggle').unbind('click').click(function(i) {
        $('#category-' + i.toString()).slideToggle();
      });
    }
  }
};

但是这个丑陋的东西工作得很好

Drupal.behaviors.toggleGroups = {
  attach:function(context, settings) {
    $('#edit-group-1-toggle').unbind('click').click(function() {
      $('#category-1').slideToggle();
    });
    $('#edit-group-2-toggle').unbind('click').click(function() {
      $('#category-2').slideToggle();
    });
    $('#edit-group-3-toggle').unbind('click').click(function() {
      $('#category-3').slideToggle();
    });
    $('#edit-group-4-toggle').unbind('click').click(function() {
      $('#category-4').slideToggle();
    });
    $('#edit-group-5-toggle').unbind('click').click(function() {
      $('#category-5').slideToggle();
    });
    $('#edit-group-6-toggle').unbind('click').click(function() {
      $('#category-6').slideToggle();
    });
    $('#edit-group-7-toggle').unbind('click').click(function() {
      $('#category-7').slideToggle();
    });
  }
};

理想情况下，我想做类似“当选择器返回结果时做某事”之类的事情 - 问题是我需要递增的数字，每次点击都会切换一个单独的 div。可能我只是想错了，但无论如何，我无法弄清楚为什么我所拥有的是无效的...

在您使用它的同时，任何关于 jQuery once() 方法的建议都将不胜感激，这样我就不必解除绑定(bind)/绑定(bind)点击处理程序...

谢谢!

Answer 1

经典闭包问题..

试试这个

Drupal.behaviors.toggleGroups = {
  attach:function(context, settings) {
    for (var i = 1; i < 8; i++) {
      (function(num){
         $('#edit-group-' + num + '-toggle')
                                    .unbind('click').click(function(num) {
            $('#category-' + num).slideToggle();
         });
      })(i)
    }
  }
};

当函数被分配时，变量 i 共享相同的内存位置。所以它将始终指向 i 的最后一个实例