Question

我正在尝试创建一个div弹出库类型的东西。但是我的方法存在问题。

我有一些链接缩略图，链接到大图像。这些图像中的每一个都是这样的

<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，因为有时可能有2个图像，有时可能有20个。所以只是想看看#galImage是否点击了我会运行一些jquery。

我的问题是，只有第一次出现#galImage才会触发jquery，其他所有实例都会失败。

这是一个带有上面例子的JSfiddle。 http://jsfiddle.net/MH6eJ/1/ 点击图片1，它有效。但是图像2失败了。

我该如何做到这一点？

Answer 1

使用class而不是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"));
    });

Answer 2

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

Answer 3

元素的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：

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

Answer 4

您需要使用类，因为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"));
    });

Answer 5

根据documentation，您的id在页面中是唯一的。如果您想要更多具有该样式的HTML元素（例如），请使用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")。

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

更新了您的jsFiddle。

Answer 6

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

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

的所有元素

Answer 7

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

绑定点击重复的div ID

7 个答案: