綁定點擊重複的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

回答

相關問題