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があります。画像が2つある場合もあれば、20ある場合もあるため、それぞれに個別のIDを作成したくありませんでした。＃galImageがクリックされるかどうかを確認するだけで、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を持つ2つのタグを持つことはできません。

<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

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を更新しました。

于 2013-02-23T19:23:46.757 に答える
0

複数の要素を持つイベント/スタイルを添付する必要がある場合は、クラスを使用する必要があります。Id は、各要素の一意の値を意味します。

于 2013-02-23T19:54:41.740 に答える
0

ID は一意である必要があります。ID の代わりにクラスを使用して、クラス名にバインドできます。

フィドルclass=galImageで各 Href に追加してから、jQuery バインディングで.galImage代わりに#galImage. jQuery は、クラス名が次のすべての要素にバインドする必要があります。galImage

于 2013-02-23T19:30:04.900 に答える