У меня возникают проблемы с отображением содержимого из массива (который может содержать от 0 до 3 элементов) в html с помощью jquery. Все это находится в одном файле php.
<?php
... other code
$watchlistArray = array();
while ($row = mysqli_fetch_assoc($result)) {
$watchlistArray[] = $row;
}
?>
Массив будет содержать от 0 до 3 элементов. Примеры результатов, полученных с использованием
<?php echo json_encode($watchlistArray)?>
2 результата
[{"prod_id":"41","prod_name":"An old desk","prod_highest_price":"69.30","prod_picture":"2.jpg","prod_end_date":"2018-04-05 20:40:00"},{"prod_id":"58","prod_name":"A brand new Iphone 8!","prod_highest_price":"795.00","prod_picture":"1.jpg","prod_end_date":"2018-09-24 20:40:00"}]
3 результата
[{"prod_id":"42","prod_name":"A new sofa","prod_highest_price":"153.00","prod_picture":"3.jpg","prod_end_date":"2018-04-06 20:40:00"},{"prod_id":"41","prod_name":"An old desk","prod_highest_price":"69.30","prod_picture":"2.jpg","prod_end_date":"2018-04-05 20:40:00"},{"prod_id":"40","prod_name":"An old chair","prod_highest_price":null,"prod_picture":"2.jpg","prod_end_date":"2018-04-12 20:40:00"}]
Теперь для отображения этого с помощью jquery и html.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
size = <?php echo sizeof($watchlistArray);?>;
if (size === 0) {
$('#watchlist0').html('No one has bidded on this item!');
}
if (size >= 1) {
$('#watchlist0').html(' <a href="../product/productPage.php?prod_ID=<?php echo $watchlistArray[0]["prod_id"]; ?>">\n' +
' <img src="../Browse/Images/<?php echo $watchlistArray[0]["prod_picture"] ?>"\n' +
' class="img-rounded img-responsive">\n' +
' </a>\n' +
' <h4><?php echo $watchlistArray[0]["prod_name"] ?></h4>\n' +
' Current price: <strong><?php echo $watchlistArray[0]["prod_highest_price"] ?></strong>');
}
if (size >= 2) {
$('#watchlist1').html(' <a href="../product/productPage.php?prod_ID=<?php echo $watchlistArray[1]["prod_id"]; ?>">\n' +
' <img src="../Browse/Images/<?php echo $watchlistArray[1]["prod_picture"] ?>"\n' +
' class="img-rounded img-responsive">\n' +
' </a>\n' +
' <h4><?php echo $watchlistArray[1]["prod_name"] ?></h4>\n' +
' Current price: <strong><?php echo $watchlistArray[1]["prod_highest_price"] ?></strong>');
}
if (size >= 3) {
alert ("case 3")
$('#watchlist2').html(' <a href="../product/productPage.php?prod_ID=<?php echo $watchlistArray[2]["prod_id"]; ?>">\n' +
' <img src="../Browse/Images/<?php echo $watchlistArray[2]["prod_picture"] ?>"\n' +
' class="img-rounded img-responsive">\n' +
' </a>\n' +
' <h4><?php echo $watchlistArray[2]["prod_name"] ?></h4>\n' +
' Current price: <strong><?php echo $watchlistArray[2]["prod_highest_price"] ?></strong>');
}
})
</script>
<body>
<div class="container">
<div class="row">
<div class="col-sm-4" align="center" id="watchlist0">
</div>
<div class="col-sm-4" align="center" id="watchlist1">
</div>
<div class="col-sm-4" align="center" id="watchlist2">
</div>
</div>
</div>
</body>
</html>
Я пробовал это разными способами (используя оператор switch, цикл и т. Д.), Но всегда сталкивался с одной и той же проблемой. Информация отображается только тогда, когда в массиве 3 элемента. Если я возьму код, который выполняется при размере> = 3, то я получу 2 изображения и другую информацию, отображаемую, когда есть как 3, так и 2 элемента. Это действительно странно, и я пытался часами - пожалуйста, помогите отстающему ученику.
ОБНОВЛЕНИЕ
Спасибо всем за предложения. Поскольку вывод является статическим, я реализовал это в php, используя оператор switch с эхом html.
<?php
$arrSize = sizeof($watchlistArray);
switch ($arrSize) {
case 0:
echo "case 0 HTML";
break;
case 1:
echo 'case 1 HTML';
break;
case 2:
echo 'case 3 HTML';
break;
case 3:
echo 'case 3 HTML';
}
?>
Возможно, это не самый эффективный способ сделать это (поскольку каждое эхо относится к одним и тем же элементам HTML), но он работает!
2 ответа
Даже если вы решили проблему - как я только что увидел, я отправлю свой ответ. Может быть, это поможет вам в дальнейшем. Я не уверен на 100%, чего вы пытались достичь с помощью этих условий, но я предположил, что вы хотите отобразить div col-sm-4 для каждого продукта, найденного в $watchlistArray.
В самом деле, js не требуется, если только вы не выполняете запрос ajax для получения данных из базы данных. Обратите внимание, что в моем коде я изменил имя переменной $watchlistArray на $products, потому что нашел его более подходящим для меня. В принципе, код считывает все продукты в списке продуктов и отображает их в ячейках col-sm-4 . Если количество продуктов в списке продуктов превышает максимальное количество продуктов, отображаемых в строке ( 3 в вашем случае), то создается новая строка. Вы можете запустить код как есть.
Примечание: старайтесь избегать использования конструкций php внутри кода js. Вместо этого значения переменных PHP могут быть переданы в качестве аргументов функциям js, которые могут вызываться для атрибутов событий (onclick, onload и т. Д.) Элементов html.
<?php
// This is just a hard-coded list. Build it as you wish (with db data for example).
$products = [
[
'prod_id' => '42',
'prod_name' => 'A new sofa',
'prod_highest_price' => '153.00',
'prod_picture' => '3.jpg',
'prod_end_date' => '2018-04-06 20:40:00'
],
[
'prod_id' => '41',
'prod_name' => 'An old desk',
'prod_highest_price' => '69.30',
'prod_picture' => '2.jpg',
'prod_end_date' => '2018-04-05 20:40:00'
],
[
'prod_id' => '40',
'prod_name' => 'An old chair',
'prod_highest_price' => null,
'prod_picture' => '2.jpg',
'prod_end_date' => '2018-04-12 20:40:00'
],
[
'prod_id' => '57',
'prod_name' => 'An interesting book',
'prod_highest_price' => '18.86',
'prod_picture' => '2.jpg',
'prod_end_date' => '2018-04-21 15:18:23'
],
[
'prod_id' => '58',
'prod_name' => 'A big apple',
'prod_highest_price' => '12.19',
'prod_picture' => '2.jpg',
'prod_end_date' => '2018-04-23 03:09:55'
],
];
?>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes" />
<meta charset="UTF-8" />
<!-- The above 3 meta tags must come first in the head -->
<title>Demo</title>
<!-- CSS resources -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
<!-- JS resources -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" type="text/javascript"></script>
<style type="text/css">
.row {
padding-top: 20px;
padding-bottom: 20px;
border-bottom: 1px solid #ccc;
}
.product {
text-align: center;
}
</style>
<body>
<div class="container">
<?php
if (isset($products) && $products) {
$numberOfProductsPerRow = 3; /* How many products should be allowed in a row? */
$numberOfDisplayedProductsPerRow = 0; /* How many products are already displayed in a row? */
foreach ($products as $key => $product) {
$productId = $product['prod_id'];
$productPicture = $product['prod_picture'];
$productName = $product['prod_name'];
$productHighestPrice = $product['prod_highest_price'];
if ($numberOfDisplayedProductsPerRow % $numberOfProductsPerRow === 0) {
?>
<div class="row">
<?php
}
?>
<div class="col-sm-4 product" id="product<?php echo $key; ?>">
<a href="../product/productPage.php?prod_ID=<?php echo $productId; ?>">
<img src="../Browse/Images/<?php echo $productPicture; ?>" class="img-rounded img-responsive" alt="<?php echo $productName; ?>">
</a>
<h4>
<?php echo $productName; ?>
</h4>
<div>
Current price: <span class="highest-price"><?php echo $productHighestPrice; ?></span>
</div>
</div>
<?php
$numberOfDisplayedProductsPerRow++;
if ($numberOfDisplayedProductsPerRow === $numberOfProductsPerRow) {
$numberOfDisplayedProductsPerRow = 0;
?>
</div>
<?php
}
}
} else {
?>
<div class="row">
<div class="col-sm-12">
No one has bidded on this item!
</div>
</div>
<?php
}
?>
</div>
</body>
</html>
Ваши условия совпадают ..
if(size>=2)
А также
if(size>=3)
Оба будут вызываться, когда есть 3 элемента .. попробуйте заменить их на
if(size==2)
...........
if(size>=3)
Похожие вопросы
Новые вопросы
javascript
По вопросам программирования на ECMAScript (JavaScript / JS) и его различных диалектах / реализациях (кроме ActionScript). Включите все соответствующие теги в свой вопрос; например, [node.js], [jquery], [json] и т. д.
En Español