Няколко връзки на страница, които трябва да се отворят в прозорец на fancybox

Имам страница с няколко връзки. Всяка от тези връзки трябва да се отвори в прозорец на fancybox. Структурата на HTML е нещо подобно:

<a href="/bg#inline" class="fancybox"> Link 1 </ a>
<div id="inline"> Content for link 1 that opens in a fancybox window </ div>

<a href="/bg#inline" class="fancybox"> Link 2 </ a>
<div id="inline"> Content for link 2 that opens in a fancybox window </ div>

<a href="/bg#inline" class="fancybox"> Link 3 </ a>
<div id="inline"> Content for link 3 that opens in a fancybox window </ div>

Като щракнете върху някоя от връзките, ще се отвори прозорец на fancybox, но не винаги с правилното съдържание. Това не е толкова странно, тъй като всички елементи div за съдържание имат един и същ идентификатор. Кое е най-доброто решение за отваряне на правилното съдържание в прозореца на fancybox за всяка връзка?

Редактиране: Мисля, че проблемът ми е решен. Използвам кода по-долу:

<a href="/bg#1" class="fancybox"> Link 1 </ a>
<div class="inline" id="1"> Content for link 1 that opens in a fancybox window </ div>

<a href="/bg#2" class="fancybox"> Link 2 </ a>
<div class="inline" id="2"> Content for link 2 that opens in a fancybox window </ div>

<a href="/bg#3" class="fancybox"> Link 3 </ a>
<div class="inline" id="3"> Content for link 3 that opens in a fancybox window </ div>

Правилен ли е този код?


jquery fancybox
person user1957551    schedule 08.01.2013    source източник
comment
Никога не трябва да имате един и същ идентификатор за повече от един елемент в страницата.   -  person Māris Kiseļovs    schedule 08.01.2013
comment
използвате различни ids и подобни class за CSS стилове?   -  person Amyth    schedule 08.01.2013

Отговори (1)


arrow_upward
0
arrow_downward

Никога не трябва да имате един и същ ID за повече от 1 елемент на страница. Ако искате да приложите подобни CSS стилове или да свържете множество елементи към javascript, трябва да използвате подобен class вместо това.

Нещо като This Fiddle

Примерен код

<a class="fancy_link" id="link_1" href="#!">Content</a>
<a class="fancy_link" id="link_2" href="#!">Content</a>
<a class="fancy_link" id="link_3" href="#!">Content</a>
person Amyth    schedule 08.01.2013
comment
Запознат съм с факта, че всички елементи трябва да имат уникален идентификатор, но не знам как трябва да се справя с това в jquery. Знаете ли как да направите is в Jquery? - person user1957551; 08.01.2013
comment
Мисля, че проблемът ми е решен. Използвам кода по-долу: ‹a href=#1 class=fancybox› Връзка 1 ‹/ a› ‹div class=inline id=1› Съдържание за връзка 1, което се отваря в прозорец на fancybox ‹/ div› ‹a href=# 2 class=fancybox› Връзка 2 ‹/ a› ‹div class=inline id=2› Съдържание за връзка 2, което се отваря в прозорец на fancybox ‹/ div› ‹a href=#3 class=fancybox› Връзка 3 ‹/ a› ‹div class=inline id=3› Съдържание за връзка 3, което се отваря във фантастичен прозорец ‹/ div› Правилен ли е този код? - person user1957551; 08.01.2013