javascript - 使用 onclick 事件时仅从 while 循环中获得一次返回

Question

但是，我正在尝试迭代 sql 中的每个项目(有 4 个)；它只返回一次迭代。应该注意的是，所有这些信息在我的 PHP 文件中都按垂直顺序排列

JavaScript

<script>
    function showDiv() {
        if($("#hiddenDiv" ).css('display') == 'none') {
            $("#hiddenDiv" ).show();
        }else {
            $("#hiddenDiv" ).hide();
        }
    }
</script>

HTML

<div class="panel-heading">
   <span>Checkout</span>
      <button onclick="showDiv()" class="btn btn-warning pull-right">
   <span class="glyphicon glyphicon-chevron-down"></span>
      </button>
</div>

PHP

       <?php            
            $query = "SELECT * FROM products ORDER BY id ASC";
            $result = mysqli_query($connect, $query);
            if(mysqli_num_rows($result) > 0)
            {
                while($row = mysqli_fetch_array($result))
                {        

        ?>
            <div class="col-md-3" style="display:none;" id="hiddenDiv">
                <form method="post" action="shop.php?action=add&id=<?php echo $row['id']; ?>">
                <div style="border: 1px solid #eaeaec; margin: -1px 19px 3px -1px; box-shadow: 0 1px 2px rgba(0,0,0,0.05); padding:10px;" align="center">
                <?php echo "<img src=\"imeg/". $row["image"] . "\" " . "class=\"img-responsive\">"; ?>
                <h5 class="text-info"><?php echo $row["p_name"]; ?></h5>
                <h5 class="text-danger">$ <?php echo $row["price"]; ?></h5>
                <input type="text" name="quantity" class="form-control" value="1">
                <input type="hidden" name="hidden_name" value="<?php echo $row["p_name"]; ?>">
                <input type="hidden" name="hidden_price" value="<?php echo $row["price"]; ?>">
                <input type="submit" name="add" style="margin-top:5px;" class="btn btn-default" value="Add to Cart">
                </div>
                </form>
           </div>

        <?php
                }
            }
        ?>

Answer 1

由于返回多行，您需要将“hiddenDiv”从 id 更改为类或在循环外创建隐藏 div

<div id="hiddenDiv" style="display:none;">

       <?php            
            $query = "SELECT * FROM products ORDER BY id ASC";
            $result = mysqli_query($connect, $query);
            if(mysqli_num_rows($result) > 0)
            {
                while($row = mysqli_fetch_array($result))
                {        

        ?>
            <div class="col-md-3" >
                <form method="post" action="shop.php?action=add&id=<?php echo $row['id']; ?>">
                <div style="border: 1px solid #eaeaec; margin: -1px 19px 3px -1px; box-shadow: 0 1px 2px rgba(0,0,0,0.05); padding:10px;" align="center">
                <?php echo "<img src=\"imeg/". $row["image"] . "\" " . "class=\"img-responsive\">"; ?>
                <h5 class="text-info"><?php echo $row["p_name"]; ?></h5>
                <h5 class="text-danger">$ <?php echo $row["price"]; ?></h5>
                <input type="text" name="quantity" class="form-control" value="1">
                <input type="hidden" name="hidden_name" value="<?php echo $row["p_name"]; ?>">
                <input type="hidden" name="hidden_price" value="<?php echo $row["price"]; ?>">
                <input type="submit" name="add" style="margin-top:5px;" class="btn btn-default" value="Add to Cart">
                </div>
                </form>
           </div>

        <?php
                }
            }
        ?>
</div>

<script>
    function showDiv() {
        $("#hiddenDiv" ).slideToggle();

    }
</script>