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

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 按钮将仅显示 $age 等于 00M、01M、02M 和 03M 的部分)。我不确定如何提取该数据，因为我正在使用循环从 sql 数据库中提取我的部分内容。我正在寻找正确的方法来做到这一点。我应该在我的数据库中添加一个额外的年龄范围列吗？ (比如column name是Range然后pull成一个变量去查？)然后用那个去触发javascript？或者我应该运行 if 语句来检查范围吗？我试过查找它，但我并没有真正看到我正在尝试做的事情的任何答案。

提前致谢!

Answer 1

我会根据其范围向每个部分推荐一个额外的类。您可以在数据库中添加范围字段或使用 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 根据按下的按钮的类显示/隐藏。