jQuery 循环和附加点击事件

Question

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

我尝试过使用 for 循环和 while 循环进行循环，但无济于事。两者中发生的情况是它们都很好地附加了单击事件，但无论单击什么图像，总是打开相同的 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++

上面

是我尝试过的两种不同的变体。第二个没有在这里定义的变量，但在我的代码中它们有。我正在做的是计算我有多少图像（var cnt），然后使用它来循环正确的次数。我假设点击函数中一定有什么东西搞砸了，因为它将它附加到每个图像上都很好，但得到了错误的 div。

编辑：

根据一些评论，我尝试将我的结构更改为如下所示：

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

然后我尝试了代码：

jQuery(document).ready(function() {
   jQuery('#container img').click(function () {
       jQuery(this).next('div.expanded').show();
   });
});

但它也不起作用。第一个图像没有执行任何操作，第二个图像显示了错误的 div。

Answer 1

您可能明显过度劳累。假设有这样的常规结构：

<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) 引用的元素之后最接近的同级元素。为了实现这一点，图像需要与信息 div 交替。否则，您需要某种可以参考的编号系统。我稍微更新了我的示例。让我知道这是否有帮助。

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

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

通过对 JavaScript 进行以下调整：

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

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

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

Answer 2

在看不到 html 的情况下，您需要某种方法将 img 与 div 通过属性关联起来，或者按照文档顺序关联。
另一件事是你不需要循环，jQuery 会自动为查询中的每个选定元素连接点击事件。

Answer 3

试试这个

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

需要稍微优化一下，但我使用的是 iPad :)

Answer 4

第一个不起作用，因为它始终是类选择器“.movi​​e1”。可能你的意思是“i”，但尽管如此，两个循环都应该工作而忽略它们令人讨厌的开销代码。