jQuery循环和附加点击事件 [英] jQuery Looping and Attaching Click Events

问题描述

好吧，我已经尝试了很多东西，并寻找答案，我似乎无法得到它的工作。我试图做的是有一些动态生成的图像，所以我不知道有多少图像将在任何时候。每个图像都有一些关联的信息，我存储在一个单独的div。我想要做的是附加一个点击事件到每个图像，将取消隐藏相关内容的div。

我已经尝试循环与一个for循环和一个while循环，无济于事。在这两种情况下都发生了什么事情，他们附加点击事件罚款，但无论点击的图像，相同的div总是打开，没有与图像相关的div。

  var cnt = jQuery（'＃container img'）。 
 cnt = cnt  -  1; （i = 0; i <= cnt; i ++）{
 jQuery（'＃container img'）。eq（i）.click（function（）{
 var i = 0 
 
 jQuery（'。movie'+ 1）.slideDown（）; 
 jQuery（'＃sort'）。hide（）; 
}）; （i <= cnt）{
 jQuery（'＃container img'）。eq（i）.click（function（）{
} 
 
 
 b $ b jQuery（'。movie'+ i）.slideDown（）; 
 jQuery（'＃sort'）。hide（）; 
}）; 
 i ++ 
  

}

以上是我试过的两种不同的变化。第二个没有在这里定义的变量，但在我的代码，他们做的。我正在做的是得到我有多少图像（var cnt），然后使用它来循环正确的次数。我假设点击函数中的东西一定会搞乱的，因为它会把它附加到每个图片上，但会得到错误的div。

编辑：

根据一些评论，我试图改变我的结构是这样的：

$ p $ < div id =container>
< img />
< img />
< div class =expanded>
//信息转到这里
< / div>
< div class =expanded>
//信息转到这里
< / div>
< / div>


然后我试了一下代码：

<$ p （）{$ b $ j 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> 
  

你可以一次把所有的东西都加上...
这样的东西： / p>

  $（'＃container img'）。click（function（）{
 $（this）.next（' div'）。show（）; 
}）; 
  

为了确切知道如何在click处理器中构造函数体，我们需要看到full标记，但应该更接近，更容易。

为了包含评论/问题 - 我们使用 .next（'div'） 在 $（this）引用的元素之后找到最接近的同胞。为了这个工作，图像需要与信息divs交替。否则，你需要一些编号系统，你可以参考一下。我已经更新了一下我的例子。让我知道这是否有帮助。

另外，如果我们使用一个编号系统：

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

对JavaScript进行以下调整：

<点击（函数（）{
var $ this = $（this）;

$ this。pre> $（'＃container img' next（'div。'+ $ this.attr（'class'））。show（）;
}）;


这对你来说真的很贴切。你会注意到图像和div共享一个编号的类来相互关联。

Okay I've tried multiple things and looked for answers to this and I can't seem to get it to work. What I'm trying to do is there are some dynamically generated images, so I don't know how many images there will be at any time. Each image has some associated information that I store in a seperate div. What I want to do is attach a click event to each image that will unhide the div that has the associated content in it.

I've tried looping with both a for loop and a while loop, to no avail. What happens in both is they attach the click event fine, but no matter the image clicked on, the same div always opens, no the div associated with the image.

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++

}

Above is the two different variations I've tried. The second doesn't have the variables defined on here but in my code they do. What I'm doing is getting a count of how many images I have (var cnt) and then using that to loop through the correct number of times. I'm assuming something must be getting messed up in the click function, as it attaches it to each image fine but gets the wrong div.

EDIT:

As per some comments, I tried changing my structure to be something like this:

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

I then tried the code:

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

But it doesn't work either. The first image does nothing and the second shows the wrong div.

解决方案

You're probably overworking this significantly. Assuming a regular structure with something like this:

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

You could get all of them at once with ... something like this:

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

In order to know for sure how to structure the function body in the click handler we need to see full markup, but that should come way closer, way easier.

To encompass comments / questions - we're using .next('div') which finds the closest sibling after the element referred to by $(this). For that to work, the images need to alternate with the info divs. Otherwise you need some sort of numbering system that you can refer back to. I've updated my example a bit. Let me know if that helps.

As an alternative if we're working with a numbering system:

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

With the following adjustments to the JavaScript:

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

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

That should come really close for you. You'll notice that the image and the div share a class that's numbered as a way to relate them to each other.

这篇关于jQuery循环和附加点击事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！