Question

这是我的代码：

  var b = $(slipStream.conf.mainVis).find('p#prev');
  b.click(function() {
    slipStream.slideLeft();
        return false;
  });

  b = $(slipStream.conf.mainVis).find('p#next');
  b.click(function() {
    slipStream.slideRight();
        return false;
  });

  b = $(slipStream.conf.controls).find('li img');
  console.log(b);
  for (var l in b) {
        l.click(function() {
              var visIndex = l.index();
              console.log(visIndex);
        });
  };

前两个绑定经过，没问题。但我无法遍历集合并将内容绑定到每个成员？（控制台告诉我“l.click不是一个函数。”）这是jQuery的限制还是我的代码关闭？这似乎是这样做的方式，但是......

Answer 1

当您枚举jQuery对象时，枚举的值是实际的DOM节点而不是jQuery包装器。因此，它们没有click方法，但您可以再次包装它们以获得所有常用功能。

当然这不是必需的，因为你可以直接从你的初始jQuery实例附加一个包装器：

$(slipStream.conf.controls).find('li img').click(function() {
    var visIndex = $(this).index();
    console.log(visIndex);
});

Answer 2

这是经典的“循环变量在回调中无法正常工作”的错误。

在调用回调时，您的变量l不再具有最初提供的值 - 它在最后一次循环中分配了最终值。

[FWIW，l实际上不是一个jQuery对象，所以你必须将它包装起来 - $(l)以便与jQuery一起使用]

循环错误的通常的修复是创建一个额外的闭包，将函数返回到当前值：

for (var l in b) {   // NB: don't use `for ... in ...` on array-like objects!
    var make_cb = function(n) {
         return function() {
              var visIndex = $(n).index();
              console.log(visIndex);
         }
    }
    $(l).click(make_cb(l));
};

幸运的是，您根本不需要循环 - 您可以让jQuery自动将回调添加到每个元素：

b = $(slipStream.conf.controls).find('li img');
b.click(function() {
    var visIndex = $(this).index();
    console.log(visIndex);
});

Answer 3

可能是问题是for循环。 .click是jQuery的一部分，所以你必须确保它是用jQuery包装的元素调用的。

$.each(b, function (index, element) {
   $(element).click(function() {
   });
};

Answer 4

使用each()，您可以遍历一组jQuery对象：

$(slipStream.conf.controls).find('li img').each(function(){
    $(this).click(function() {
        var visIndex = $(this).index();
        console.log(visIndex);
    });
});

$(this)将匹配集合中当前索引的对象。

jQuery - 为什么我不能将事件绑定到循环中的元素？

4 个答案: