类别按钮

Question

我正在尝试为我的电子商务网站创建一个类别按钮。一直试图生成一个单击按钮的想法，以便jQuery能够切换每个代表的数据库。到目前为止，这个想法已经到了那里，但遗漏了一些东西。

到目前为止，我一直在做的是静态输入ID，结果是将过滤结果分组，而不是切换结果。

与SQL的数据库连接：

<?php
$db = mysqli_connect('127.0.0.1', 'root', '', 'firmciti');

if(mysqli_connect_errno()) {
    echo 'Database connect failed with follwing errors: '. mysqli_connect_error();
    die();
}
error_reporting();


$sql = "SELECT * FROM nav";
$squery = $db->query($sql);
$pql = "SELECT * FROM companies";
$pquery = $db->query($pql);
$gql = "SELECT * FROM companies WHERE catId = 2";
$gquery = $db->query($gql);
$fql = "SELECT * FROM companies WHERE catId = 3";
$fquery = $db->query($fql);
$aql = "SELECT * FROM companies WHERE catId = 4";
$aquery = $db->query($aql);
$cql = "SELECT * FROM companies WHERE catId = 5";
$cquery = $db->query($cql);
...
?>

jquery：

<script>
$(document).ready(function(){
    $("#1").click(function(){
        $("#view").toggle();

    });
});
$(document).ready(function(){
    $("#2").click(function(){
        $("#view1").toggle();

    });
});
$(document).ready(function(){
    $("#3").click(function(){
        $("#view2").toggle();

    });
});
$(document).ready(function(){
    $("#4").click(function(){
        $("#view3").toggle();

    });
...</script>

html：

<?php while($cat = mysqli_fetch_assoc($squery)): ?> 
<button id="<?=$cat['catId']; ?>"><img src="<?=$cat['img'];?>" style="height: 80px; width: 80px; margin: 0 15px;"/> </button>

<?php endwhile; ?>

<!--all-->

<div id="view" style="margin: 0 20px" >

<?php while($comp = mysqli_fetch_assoc($pquery)): ?> 
<!-- Gallery list-->
    <button class="w3-button w3-white w3-border w3-hover-amber " href="" type="button" style="width: 340px; height: 100px; margin: 5px;"><div class="col-xs-4">
        <img src="<?=$comp['compLogo'];?>" style="height: 80px; width: 80px";/>
            </div>
        <div class="col-xs-8">
            <h4 class="w3-display-topleft"><?=$comp['compName'];?></h4><br><br>


            <h6 class="w3-half">25min</h6>

        </div>
    </button>

<?php endwhile;?>
</div>


<!--grocery-->
<div id="view1" style="margin: 0 20px" hidden="">

<?php while($comp = mysqli_fetch_assoc($gquery)): ?> 
<!-- Gallery list-->
    <button class="w3-button w3-white w3-border w3-hover-amber " href="" type="button" style="width: 340px; height: 100px; margin: 5px;"><div class="col-xs-4">
        <img src="<?=$comp['compLogo'];?>" style="height: 80px; width: 80px";/>
            </div>
        <div class="col-xs-8">
            <h4 class="w3-display-topleft"><?=$comp['compName'];?></h4><br><br>


            <h6 class="w3-half">25min</h6>

        </div>
    </button>

<?php endwhile;?>
</div>

<!--food-->
<div id="view2" style="margin: 0 20px" hidden="">

<?php while($comp = mysqli_fetch_assoc($fquery)): ?> 
<!-- Gallery list-->
    <button class="w3-button w3-white w3-border w3-hover-amber " href="" type="button" style="width: 340px; height: 100px; margin: 5px;"><div class="col-xs-4">
        <img src="<?=$comp['compLogo'];?>" style="height: 80px; width: 80px";/>
            </div>
        <div class="col-xs-8">
            <h4 class="w3-display-topleft"><?=$comp['compName'];?></h4><br><br>


            <h6 class="w3-half">25min</h6>

        </div>
    </button>

<?php endwhile;?>
</div>