Php 显示动态内联内容的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>

具有



具有


仅限DVD:



仅在线：



在线+DVD:

剧本

<script type="text/javascript">
$(document).ready(function() {
    $("#fancybox").fancybox({
        'titlePosition'     : 'inside',
        'transitionIn'      : 'none',
        'transitionOut'     : 'none'
    });
});
</script>

<script type="text/javascript">
$(document).ready(function() {
    $(".fancybox").fancybox({
        'titlePosition'     : 'inside',
        'transitionIn'      : 'none',
        'transitionOut'     : 'none'
    });
});
</script> 

$（文档）.ready（函数（）{
$（“#fancybox”）。fancybox({
“标题位置”：“内部”，
“transitionIn”：“无”，
“transitionOut”：“无”
});
});

然而，发生的是Fancybox窗口打开，它始终显示第一个项目的价格，而不管客户选择了哪个项目

因此，出于某种原因，div/Fancybox忽略了单击的“定价选项”按钮。有什么办法可以做到这一点吗？

原因是Fancybox窗口会打开，并且无论客户选择了哪个项目，它都会显示第一个项目的价格

对于

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建议在评论中使用class，原因如下

表示ID必须是文档范围内唯一的

说了同样的话，但换言之。它说ID在其主子树中必须是唯一的，如果我们阅读它的定义，它基本上就是文档

所以这里也要做些改变

剧本

<script type="text/javascript">
$(document).ready(function() {
    $("#fancybox").fancybox({
        'titlePosition'     : 'inside',
        'transitionIn'      : 'none',
        'transitionOut'     : 'none'
    });
});
</script>

<script type="text/javascript">
$(document).ready(function() {
    $(".fancybox").fancybox({
        'titlePosition'     : 'inside',
        'transitionIn'      : 'none',
        'transitionOut'     : 'none'
    });
});
</script> 

$（文档）.ready（函数（）{
$（“.fancybox”）.fancybox({
“标题位置”：“内部”，
“transitionIn”：“无”，
“transitionOut”：“无”
});
});

HTML

ID应该是唯一的，因此不能对同一文档中的多个元素使用相同的ID。使用类instead@JFK你能告诉我我建议在哪里使用相同的ID吗？如果你理解这个问题，你是在暗示（提示：链接是在
foreach
循环中生成的）。。。您甚至建议更改目标元素的ID，但不要更改触发器element@JFK
为fancybox目标按钮和fancybox选择器提供动态id
是的，您说了，但没有反映在代码中（仍然使用相同的
id=“fancybox”
）
<script type="text/javascript">
$(document).ready(function() {
    $(".fancybox").fancybox({
        'titlePosition'     : 'inside',
        'transitionIn'      : 'none',
        'transitionOut'     : 'none'
    });
});
</script> 

<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>