Question

我的代码：

<section class="content">
    <h2 class="heading">Milestones Navigation</h2>
    <div style="width: 100%;">

    <button style="width: 16%;" id="0-3m">0-3M</button>
    <button style="width: 16%;" id="3-6m">3-6M</button>
    <button style="width: 16%;" id="6-9m">6-9M</button>
    <button style="width: 16%;" id="9-12m">9-12M</button>
    <button style="width: 16%;" id="12-18m">12-18M</button>
    <button style="width: 16%;" id="18Mup">18M+</button>

    </div>
</section>
<?php
$query = mysqli_query($db_conn, $m);

while ($row = mysqli_fetch_array($query)) {
    $id = $row['ID'];
    $age = $row['age'];
    $cat = $row['category'];
    $title = $row['title'];
    $desc = $row['description'];
    ?>
    <section class="content">
        <h2 class="heading" style="border:none;">
            <div>
                <div style=" float:left; text-align: left; font-family: 'Yu Gothic Medium',sans-serif; border-bottom: solid thin lightgray;">
                    <small><strong><?php echo $title; ?></strong></small>
                </div>

            </div>
        </h2>
        <br><br>
        <div>
            <div style="font-family: 'Droid Sans',sans-serif; margin-top: 5%; display: inline; width: 50%;">
                <?php echo $desc; ?>
            </div>
            <div style="display: inline; text-align: right; width: 30%; float:right; font-family: 'Yu Gothic Medium',sans-serif; text-transform: capitalize">
                <small><?php echo $age .' | ' . $cat; ?></small>
            </div>
        </div>
    </section>
    <?php
}
?>

我的问题：

我希望每个按钮对应一定的年龄范围，（按0-3M按钮将仅显示年龄等于00M，01M，02M和03M的那些部分）。我不确定如何提取数据，因为我使用循环从sql数据库中提取我的节内容。我正在寻找正确的方法来做到这一点。我应该在数据库中添加一个年龄范围的附加列吗？（例如，列名是Range，然后将其拉入变量进行检查？）然后用它来触发javascript？或者我应该运行if语句来检查范围？我已经尝试过了，但我并没有真正看到我试图做的任何答案。

提前致谢！

Answer 1

我会建议每个部分根据其范围增加一个类。您可以在数据库中添加Range字段或使用PHP代码来确定范围 - 如下所示：

switch($row['age']) {
    case '00M':
    case '01M':
    case '02M':
    case '03M':
        $range = 'age3m';
    // ...
    // Fill in the other ranges here
    // ...
    default:
        $range = 'age18m';
}

完成此操作后，您可以在该部分添加$range作为课程。然后根据按下的按钮类使用javascript显示/隐藏。

Answer 2

首先，PHP是一种在服务器上运行的脚本语言。另一方面，JavaScript是一种在客户端（浏览器）上运行的脚本语言。

当JavaScript＆＃34;开始工作＆＃34;时，PHP已经完成，信息已发送给客户端。

PHP无法在JavaScript中调用任何触发器，反之亦然。但是，JavaScript可以执行AJAX调用，可以调用PHP脚本（或Web服务），PHP可以编写/回显任何JavaScript代码（但我不推荐这种方法）。

要过滤数据，有两个解决方案。

通过所选范围进行AJAX调用。

document.getElementById('button').addEventListener('click' , function(event) {
    var id = this.id;
    /** ajax call and javascript process **/
});

或渲染所有表格并显示已选择的范围。第二个选项也将使用事件监听器。

Javascript事件监听器触发php代码，反之亦然？

2 个答案: