Fancybox 显示动态内联内容

Question

我正在我的页面上实施 Fancybox。我的目标是有一个显示 'pricing options' 的按钮，单击时会弹出一个 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 window 打开后，它始终显示第一个项目的价格，无论客户选择了哪个项目。

因此，出于某种原因，div/Fancybox 忽略了单击了哪个 'Pricing Options' 按钮。有没有办法让这个工作？

Answer 1

原因 Fancybox window 打开后，它始终显示第一个项目的价格，无论客户选择了哪个项目。

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

花哨的框和它在循环内的调用按钮和目标 id 是相同的，所以它总是只显示数据库中的第一行记录。

解决方案

将动态 ID 赋予 fancybox 目标按钮和 fancybox 选择器

例如，假设您可以从数据库中获取 ID <?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 建议在评论中使用 class here，原因是

HTML 4.01 specification 表示 ID 必须在文档范围内是唯一的。

HTML 5 specification 说的是同一件事，但换句话说。它说ID在它的home子树中必须是唯一的，如果我们阅读它的定义，它基本上就是文档。

所以也在这里进行更改

脚本

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

Fancybox 显示动态内联内容

Fancybox displaying dynamic inline content

php

jquery

fancybox