1

我正在尝试创建一个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 get 是否被点击，我会运行一些 jquery。

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

这是上面示例的 JSfiddle。http://jsfiddle.net/MH6eJ/1/ 点击图片1，它可以工作。但是图 2 失败了。

我怎样才能做到这一点？

4

7 回答 7

0

使用类而不是 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-23T19:21:33.920 回答
0

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

于 2013-02-23T19:21:43.607 回答
0

元素的 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"));
});
于 2013-02-23T19:21:55.463 回答
0

您需要改用类，因为 ID 必须是唯一的。

例如

<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-23T19:22:40.280 回答
0

根据文档，您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。

于 2013-02-23T19:23:46.757 回答
0

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

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

于 2013-02-23T19:30:04.900 回答
0

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

于 2013-02-23T19:54:41.740 回答