Question

我正在将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忽略了点击了“定价选项”按钮。有没有办法使这项工作？

Answer 1

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

在循环内部和目标ID内的花式框和它的调用按钮是相同的，因此它始终只显示数据库中的第一行记录。

<强>解决方案

将动态ID提供给fancybox目标按钮和fancybox选择器

例如，假设您可以从数据库<?php echo $course['id']; ?>

中获取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建议在评论中使用课程here，原因是

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

HTML 5 specification说同样的话，但换句话说。它说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>

Fancybox显示动态内联内容

1 个答案: