jQuery循环和附加Click事件

问题描述

| 好的，我已经尝试了多种方法并寻找了答案，但似乎无法正常工作。我想做的是有一些动态生成的图像，所以我不知道随时会有多少个图像。每个图像都有一些相关的信息，我将这些信息存储在单独的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++

} 以上是我尝试过的两个不同的变体。第二个没有在这里定义的变量，但是在我的代码中有。我正在做的是计算我拥有的图像数量（var cnt），然后使用它来循环正确的次数。我假设在click函数中一定有些混乱，因为它可以将其附加到每个图像上，但是会得到错误的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。     

解决方法

        您可能为此工作过度。假设具有以下内容的常规结构：

<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共享一个类，该类被编号为一种将它们彼此关联的方式。     ,        在没有看到您的html的情况下，您需要某种方式将

img

与

div

关联在一起，或者将其与属性关联，或者按文档顺序关联。 另一件事是您不需要循环，jQuery将自动为查询中每个选定的元素连接单击事件。     ,        尝试这个

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

需要优化一点，但是我在iPad上:)     ,        第一个不起作用，因为它始终是类选择器\'。movie1 \'。可能是您的意思是'i \'，但是尽管如此，两个循环都应该不管它们讨厌的开销代码而工作。