文章/答案/技术大牛

发布

社区首页 >问答首页 >jQuery循环和附加单击事件

问jQuery循环和附加单击事件
EN

Stack Overflow用户

提问于 2011-05-28 05:01:31

回答 4查看 4.6K关注 0票数 5

好的，我已经尝试了很多方法，并且寻找了答案，但是我似乎不能让它工作。我尝试做的是有一些动态生成的图像，所以我不知道在任何时候都会有多少图像。每个图像都有一些相关信息，我将其存储在单独的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。

jquery

loops

for-loop

while-loop

回答 4

Stack Overflow用户

回答已采纳

发布于 2011-05-28 05:05:41

你可能工作过度了。假设有一个规则结构，如下所示：

<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)引用的元素之后找到最接近的同级元素。为此，图像需要与info 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共享一个类，该类的编号是为了将它们彼此关联起来。

票数 6

Stack Overflow用户

发布于 2011-05-28 05:06:32

在看不到html的情况下，您需要通过某种方式将img与div关联起来，可以使用属性，也可以按文档顺序关联。另一件事是你不需要一个循环，jQuery会自动为你的查询中的每个被选中的元素挂钩点击事件。

票数 0

Stack Overflow用户

发布于 2011-05-28 05:08:24

尝尝这个

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

需要进行一些优化，但我使用的是iPad :)

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/6157645

复制

相似问题

问jQuery循环和附加单击事件
EN

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jQuery循环和附加单击事件EN

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jQuery循环和附加单击事件
EN