Fancybox отображает динамический встроенный контент
Я внедряю Fancybox на своей странице. Моя цель состоит в том, чтобы иметь кнопку с надписью «Варианты цен», и при щелчке появляется окно Fancybox, в котором указаны цены товара, которые содержатся в базе данных php.
Сама страница генерирует элементы также из той же базы данных php.
Вот мой код:
<div class="pager clearfix">
<?php $recorded_courses=$ courses->get_courses(); ?>
<?php foreach($recorded_courses as $key=>$course) : ?>
<div class="course-grid2 grid"> <a href="<?php echo $course['course_id']; ?>.html">
<img src="<?php echo $course['course_id']; ?>/box.png" width="180" height="180" alt="<?php echo $course['title']; ?>" title="Learn more">
</a>
<h3><a href="<?php echo $course['course_id']; ?>.html"><?php echo $course['title']; ?></a></h3>
<p class="short-description">
<?php echo $course[ 'summary']; ?>with <b><?php echo $course['instructors']; ?></b>
</p>
<p class="small">
<?php echo $course[ 'format']; ?>
</p>
<div class="links"> <a href="<?php echo $course['course_id']; ?>.html">Learn more</a> <a id="fancybox" href="#content-div" title="See Pricing">See Pricing</a>
<div style="display: none">
<div id="content-div" style="width:250px;height:400px;overflow:auto;">
<h3><a href="<?php echo $course['course_id']; ?>.html"><?php echo $course['title']; ?></a></h3>
<?php echo $course[ 'summary']; ?>with <b><?php echo $course['instructors']; ?></b>
<p style="font-size:x-small">
<br> <strong> DVDs only:</strong>
<?php echo $courses->display_price2($course['price'], $course['price2']); ?>
<?php echo $courses->cart_form($course['cart_title'] . ' - ' . $course['instructors'], $course['price'], $course['course_id'], 'recorded-courses'); ?></p>
<p style="font-size:x-small">
<br><strong> Online only:</strong>
<?php echo $courses->display_price3($course['price3'], $course['price4']); ?> <a href="<?php echo $course['moodle_id']; ?>"> Enroll Now </a>
</p>
<p style="font-size:x-small">
<br> <strong> Online + DVDs:</strong>
</p>
<p style="font-size:x-small">
<?php echo $courses->display_price4($course['price5'], $course['price6']); ?> <a href="<?php echo $course['moodle_id']; ?>"> Enroll & Purchase Now </a>
</p>
</div>
</div>
</div>
</div>
</div>
скрипт
<script type="text/javascript">
$(document).ready(function() {
$("#fancybox").fancybox({
'titlePosition' : 'inside',
'transitionIn' : 'none',
'transitionOut' : 'none'
});
});
</script>
Однако происходит то, что открывается окно Fancybox, и оно всегда отображает цены на первый товар, независимо от того, какой товар был выбран клиентом.
По какой-то причине div / Fancybox игнорирует, какая кнопка «Параметры цены» была нажата. Есть ли способ сделать эту работу?
Решение
причина Откроется окно Fancybox, в котором всегда отображаются цены на первый товар, независимо от того, какой товар был выбран клиентом.
<a id="fancybox" href="#content-div" title="See Pricing">See Pricing</a>
<div style="display: none">
<div id="content-div" style="width:250px;height:400px;overflow:auto;">Content</div>
</div>
Необычное поле и его кнопка вызова внутри цикла и идентификатор цели одинаковы, поэтому всегда будет отображаться только первая запись строки из базы данных.
Решение
Присвойте динамический идентификатор целевой кнопке fancybox и селектору fancybox
например, предполагая, что вы можете получить идентификатор из базы данных <?php echo $course['id']; ?>
<a id="fancybox" href="#content-div<?php echo $course['id'];?>" title="See Pricing">See Pricing</a>
<div style="display: none">
<div id="content-div<?php echo $course['id'];?>" style="width:250px;height:400px;overflow:auto;">Content</div>
</div>
Предположим, для первого пункта id=1 и для второго пункта id=2 так в цикле Fancybox и его кнопка вызова будет выглядеть так
за id=1
<a id="fancybox" href="#content-div1" title="See Pricing">See Pricing</a>
<div style="display: none">
<div id="content-div1" style="width:250px;height:400px;overflow:auto;">Content</div>
</div>
и для id=2
<a id="fancybox" href="#content-div2" title="See Pricing">See Pricing</a>
<div style="display: none">
<div id="content-div2" style="width:250px;height:400px;overflow:auto;">Content</div>
</div>
Примечание: @JFK предложил использовать класс Вот в комментариях причины
Спецификация HTML 4.01 говорит, что ID должен быть уникальным для всего документа.
Спецификация HTML 5 говорит то же самое, но другими словами. В нем говорится, что ID должен быть уникальным в своем домашнем поддереве, которое в основном является документом, если мы прочитаем его определение.
Также внесите изменения здесь
скрипт
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox({
'titlePosition' : 'inside',
'transitionIn' : 'none',
'transitionOut' : 'none'
});
});
</script>
HTML
<a class="fancybox" href="#content-div<?php echo $course['id'];?>" title="See Pricing">See Pricing</a>
<div style="display: none">
<div id="content-div<?php echo $course['id'];?>" style="width:250px;height:400px;overflow:auto;">Content</div>
</div>
Другие решения
Других решений пока нет …