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

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()方法的建议，以便我不必解除绑定/绑定单击处理程序，也将不胜感激……

谢谢!

Answer 1

这是一种常见的“成语”。如果你使用两个通用的类，一切都会变得更容易操作。去掉id，添加类edit-group-toggle和category，就可以通过索引抓取对应的目标了：

attach: function( context, settings ) {
  $('.edit-group-toggle').click(function() {
    $('.category').eq( $(this).index() ).slideToggle();
  });
}

Answer 2

经典闭包问题..

尝尝这个

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的最后一个实例