2017-04-25 77 views
0

我想通過sql中的每個項目(有4個)迭代,但是;它只返回一個迭代。應當注意的是,所有這些信息都是在這個垂直順序在我的PHP文件只使用onclick事件時從while循環返回一個

的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 
       } 
      } 
     ?> 

回答

0

由於有多個行返回,則需要從ID更改「hiddenDiv」一類或創建循環之外隱藏的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> 
+0

我完全忽略了這一點。非常感謝你,很高興這是一個簡單的解決方案。 :)完美的作品! – interMind

0
當你點擊

showDiv按鈕,它將只顯示一個div,id爲hiddenDiv,剩餘的將被隱藏。因此,將hiddenDiv添加爲類並製作了co rresponding腳本改變也

<div class="col-md-3 hiddenDiv" style="display:none;"> 
<script> 
    function showDiv() { 
     if($(".hiddenDiv").css('display') == 'none') { 
      $(".hiddenDiv").show(); 
     }else { 
      $(".hiddenDiv").hide(); 
     } 
    } 
</script> 
+0

謝謝你們了!同上解決方案。奇蹟般有效。 – interMind