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

问题描述

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

我尝试使用 for 循环和 while 循环进行循环，但无济于事.在两者中发生的事情是他们很好地附加了点击事件，但无论点击图像，总是打开相同的 div，没有与图像关联的 div.

var cnt = jQuery('#container img').length;cnt = cnt - 1;变量 i = 0for(i=0; i<=cnt; i++) {jQuery('#container img').eq(i).click(function() {jQuery('.movi​​e' + 1).slideDown();jQuery('#sort').hide();});}while(i<=cnt) {jQuery('#container img').eq(i).click(function() {jQuery('.movi​​e' + i).slideDown();jQuery('#sort').hide();});我++

}

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

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

<img/><img/><div class="expanded">//信息在这里
<div class="expanded">//信息在这里

然后我尝试了代码:

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

但它也不起作用.第一张图片什么都不做，第二张图片显示了错误的 div.

解决方案

您可能在这方面工作过度.假设有这样的规则结构:

<img/><div class="信息"><img/><div class="信息"><img/><div class="信息">

你可以一次得到所有的...像这样:

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

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

为了包含评论/问题 - 我们使用了 .next('div')，它在 $(this) 引用的元素之后找到最近的兄弟.为此，图像需要与信息 div 交替.否则，您需要某种可以参考的编号系统.我已经稍微更新了我的例子.如果这有帮助，请告诉我.

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

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

对 JavaScript 进行以下调整:

$('#container img').click(function () {var $this = $(this);$this.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屋！