Я пытаюсь перебрать каждый элемент в 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
}
}
?>
2 ответа
Так как возвращено несколько строк, вам нужно изменить "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>
Когда вы нажимаете кнопку showDiv, он покажет только один div с идентификатором hiddenDiv, а остальные будут скрыты. Так что добавьте hiddenDiv в качестве класса и также внесли соответствующее изменение в скрипт
<div class="col-md-3 hiddenDiv" style="display:none;">
<script>
function showDiv() {
if($(".hiddenDiv" ).css('display') == 'none') {
$(".hiddenDiv" ).show();
}else {
$(".hiddenDiv" ).hide();
}
}
</script>
Похожие вопросы
Новые вопросы
javascript
По вопросам программирования на ECMAScript (JavaScript / JS) и его различных диалектах / реализациях (кроме ActionScript). Включите все соответствующие теги в свой вопрос; например, [node.js], [jquery], [json] и т. д.