绑定点击重复的div ID

我正在尝试创建一个div弹出库类型的东西。但是我的方法存在问题。绑定点击重复的div ID

我有几个链接到大图像的链接缩略图。这些图像的每一个看起来像这样

<a href="www.google.com" id="galImage"> 
<img src="http://www.savoryspiceshop.com/content/mercury_modules/cart/items/3/0/3/3030/rogan-josh-salt-free-thumbnail-fw232.jpg"> 
</a> 
<br /> 
<a href="www.yahoo.com" id="galImage"> 
<img src="http://www.savoryspiceshop.com/content/mercury_modules/cart/items/2/9/8/2986/italian-herbs-salt-free-thumbnail-fw232.jpg"> 
</a>

正如你所看到的，每个人都有“galImage”的相同的ID。我不想为每个ID创建一个单独的ID，因为有时候可能会有2个图像，有时候可能会有20个。所以只要简单地检查看看#galImage get的点击是否会运行一些jquery。

我的问题是，只有#galImage的非常首次出现触发jQuery的，所有其他实例失败。

下面是一个JSfiddle与上面的例子。 http://jsfiddle.net/MH6eJ/1/ 点击图片1，它的工作原理。但图片2失败。

我怎样才能做到这一点？

来源

2013-02-23 ipixel

据documentation，你id有千万要在页面独特。如果您想要使用该样式的更多HTML元素（适用于exapmle），请使用class。

id = name [CS]: 
该属性分配一个名称的元素。该名称在文档中必须是唯一的。
class = cdata-list [CS]: 
该属性为元素分配一个类名或一组类名。任何数量的元素可以被分配相同的类名称或名称。多个类名称必须用空格字符分隔。

<a href="www.google.com" class="galImage"> 
<img src="http://www.savoryspiceshop.com/content/mercury_modules/cart/items/3/0/3/3030/rogan-josh-salt-free-thumbnail-fw232.jpg"> 
</a> 
<br /> 
<a href="www.yahoo.com" class="galImage"> 
<img src="http://www.savoryspiceshop.com/content/mercury_modules/cart/items/2/9/8/2986/italian-herbs-salt-free-thumbnail-fw232.jpg"> 
</a>

然后，当你使用jQuery选择类使用$(".galImage")。

已更新您的jsFiddle。

来源

2013-02-23 19:23:46

很好，没有意识到类和id之间存在差异。好东西，谢谢！ – ipixel 2013-02-23 19:30:38

使用类而不是ID，重复ID是不是一个好主意。

使用类您解决问题：jsfiddle

<a href="www.google.com" class="galImage"> 
<img src="http://www.savoryspiceshop.com/content/mercury_modules/cart/items/3/0/3/3030/rogan-josh-salt-free-thumbnail-fw232.jpg"> 
</a> 
    <br /> 
<a href="www.yahoo.com" class="galImage"> 
<img src="http://www.savoryspiceshop.com/content/mercury_modules/cart/items/2/9/8/2986/italian-herbs-salt-free-thumbnail-fw232.jpg"> 
</a> 

$('.galImage').click(function(e){ 
     e.preventDefault(); 
     alert($(this).attr("href")); 
    });

来源

2013-02-23 19:21:33 martriay

所有的ID必须是唯一的。如果你想重复一个ID，你应该改用一个类。

来源

2013-02-23 19:21:43 maxedison

元素的ID必须是唯一的。所以你不能有两个标签具有相同的ID。

<a href="www.google.com" class="galImage"> 
<img src="http://www.savoryspiceshop.com/content/mercury_modules/cart/items/3/0/3/3030/rogan-josh-salt-free-thumbnail-fw232.jpg"> 
</a> 
    <br /> 
<a href="www.yahoo.com" class="galImage"> 
<img src="http://www.savoryspiceshop.com/content/mercury_modules/cart/items/2/9/8/2986/italian-herbs-salt-free-thumbnail-fw232.jpg"> 
</a>

JS：

来源

2013-02-23 19:21:55

您需要使用类，而不是作为ID必须是唯一的。

E.g

<a href="www.google.com" id="Google" class="galImage"> 
    <img src="http://www.savoryspiceshop.com/content/mercury_modules/cart/items/3/0/3/3030/rogan-josh-salt-free-thumbnail-fw232.jpg"> 
</a> 
<br /> 
<a href="www.yahoo.com" id="Yahoo" class="galImage"> 
    <img src="http://www.savoryspiceshop.com/content/mercury_modules/cart/items/2/9/8/2986/italian-herbs-salt-free-thumbnail-fw232.jpg"> 
</a>

和你的jQuery将

$('.galImage').click(function(e){ 
     e.preventDefault(); 
     alert($(this).attr("href")); 
    });

来源

2013-02-23 19:22:40 dev

ID应该是唯一的。您可以使用类而不是ID并绑定到类名。

在你的小提琴中，向每个Href添加class=galImage，然后在你的jQuery绑定中，使用.galImage而不是#galImage。 jQuery应该绑定到类名为galImage的所有元素

来源

2013-02-23 19:30:04

当我们必须使用多个元素附加事件/样式时，我们必须使用类。 Id表示每个元素的唯一值。

来源

2013-02-23 19:54:41 aishazafar

绑定点击重复的div ID

回答

相关问题