jQuery循环和附加单击事件

好吧，我尝试了很多方法，寻找答案，但我似乎无法让它发挥作用。我想做的是有一些动态生成的图像，所以我不知道在任何时候会有多少图像。每个图像都有一些相关信息，我将这些信息存储在一个单独的div中。我要做的是在每个图像上附加一个click事件，该事件将取消隐藏其中包含相关内容的div

我尝试过使用for循环和while循环进行循环，但都没有效果。两者都会附加click事件，但无论单击的图像是什么，都会打开相同的div，而不会打开与图像关联的div

var cnt = jQuery('#container img').length;
   cnt = cnt - 1;
   var i = 0
   for(i=0; i<=cnt; i++) {
       jQuery('#container img').eq(i).click(function() {
           jQuery('.movie' + 1).slideDown();
           jQuery('#sort').hide();
       });
   }


while(i<=cnt) {
jQuery('#container img').eq(i).click(function() {
       jQuery('.movie' + i).slideDown();
       jQuery('#sort').hide();
    });
i++

---

但它也不起作用。第一张图没有显示任何内容，第二张图显示了错误的分区。

这可能是您过度使用的结果。假设有这样的规则结构：

<div id="container">
  <img />
  <img />
  <div class="expanded">
     // Info Goes Here
  </div>
  <div class="expanded">
     // Info Goes Here
  </div>
</div>

<div id="container">
  <img />
  <div class="info">
  <img />
  <div class="info">
  <img />
  <div class="info">
</div>

$('#container img').click(function () {
  $(this).next('div').show();
});

为了确定如何在单击处理程序中构造函数体，我们需要查看完整的标记，但这应该更接近、更容易

为了包含注释/问题，我们使用

.next（'div'）

，它在

$（this）

引用的元素之后查找最近的同级元素。要使其工作，图像需要与info div交替。否则，您需要某种类型的编号系统，可以重新引用。我已经更新了我的示例。如果有帮助，请告诉我

如果我们使用的是编号系统，作为替代方案：

<div id="container">
  <img class="group1" />
  <img class="group2" />
  <img class="group3" />
  <div class="group1" />
  <div class="group2" />
  <div class="group3" />
</div>

---

这对你来说应该很接近。您会注意到图像和div共享一个类，该类被编号为将它们相互关联的方式。

在看不到html的情况下，您需要某种方式将

img

与

div

关联，或者与属性关联，或者如果它是按文档顺序关联的。 另一件事是，您不需要循环，jQuery将自动连接查询中每个选定元素的单击事件

试试这个

jQuery('#container img').each(function(){
   $(this).bind('click', function(){
        $('.movie' + $(this).index()).slideDown();
    });
});

---

需要优化一点，但我在iPad上：）

第一个不起作用，因为它总是类选择器“.movie1”。可能你的意思是“i”，但尽管如此，这两个循环都应该可以工作，而不考虑它们讨厌的过热代码。

你能提供一些html结构吗？你比我强！你们怎么发得这么快+1@Jay-我的办公室提供一台浓缩咖啡机。：）好吧，我改变了我的结构，基本上与你的结构相匹配，但是代码仍然不起作用。现在，最后一个图像将显示一个div，但它是错误的div，其余图像将不显示任何内容。@Darin Kotter-您可以编辑您的文章并包含HTML吗？我很乐意根据您现有的结构来调整解决方案。另外，请确保您没有使用ID-它们必须是不同的。@g.d.d.c-我已经添加了基本结构。我省略了我正在做的许多PHP循环，但这显示了基本结构。我正在重用类名，但不是ID。没有理由使用每一个来绑定。jQuery使用隐含迭代。只要有一种方法可以识别图像/div对，你就可以直接绑定它。请注意，这很难看——我强烈建议以g.d.d.c的方式进行绑定！简单的ftw@g.d.d.c-我的办公室不提供浓缩咖啡机：）

$('#container img').click(function () {
  var $this = $(this);

  $this.next('div.' + $this.attr('class')).show();
});

jQuery('#container img').each(function(){
   $(this).bind('click', function(){
        $('.movie' + $(this).index()).slideDown();
    });
});