【发布时间】：2018-03-12 20:17:54
【问题描述】：
我在使用 jquery 在 html 中显示数组（可以是 0 到 3 个元素之间）的内容时遇到问题。所有这些都在同一个 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 个元素时显示。如果我取出在 size >=3 时运行的代码，那么当同时存在 3 个和 2 个元素时，我会得到 2 张图像和其他信息。这真的很奇怪，我已经尝试了几个小时 - 请帮助一个苦苦挣扎的学生。
更新
谢谢大家的建议。由于输出是静态的，我在 php 中使用带有 html 回显的 switch 语句实现了这一点。
<?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 元素）但它确实有效！
【问题讨论】：
-
你为什么要混合使用php和javascript，输出似乎是静态的并且取决于php变量的值，所以似乎不需要javascript。
-
我建议您查看浏览器接收到的由 php.ini 生成的源代码。您甚至可以在上面更新您的问题。
-
@jeroen 我这样做了，效果很好。谢谢
标签： javascript php jquery arrays