jQuery循环和附加单击事件

Question

好吧,我已经尝试了多种方法,并寻找答案,我似乎无法让它工作.我想要做的是有一些动态生成的图像,所以我不知道随时会有多少图像.每个图像都有一些相关的信息,我存储在一个单独的div中.我想要做的是将click事件附加到每个图像,该事件将取消隐藏其中包含相关内容的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();
});

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

包含评论/问题 - 我们正在使用.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共享一个编号为相互关联的类的类.