我在使用jquery在html中显示数组内容（可以在0到3个元素之间）时遇到问题。所有这些都在同一个php文件中。
<?php echo json_encode($watchlistArray)?>
该数组将包含0到3个元素。 使用
获得的示例输出[{"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"}]
2结果
[{"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"}]
3结果
<!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>
现在使用jquery和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';
}
?>
我已经尝试过几种不同的方式（使用switch语句，循环等），但我总是遇到同样的问题。仅当阵列中有3个元素时，才会显示该信息。如果我取出尺寸> = 3时运行的代码，那么当有3个和2个元素时，我会显示2个图像和其他信息。这真的很奇怪，我已经尝试了几个小时 - 请帮助一个苦苦挣扎的学生。
更新
谢谢大家的建议。由于输出是静态的，我使用带有html回声的switch语句在php中实现了这个。
// Read data from 6 files and create one JavaRDD from those files:
JavaRDD<PurchasesDataObject> allRecords = context.textFile(inputFilePath).map (
data -> {
String[] fields = data.split(",");
return new PurchasesDataObject(fields[0], fields[1], fields[2], fields[3],fields[4]);
});
// Filter all records into 4 groups:
JavaRDD<PurchasesDataObject> collectionControl = allRecords.filter(record -> "C".equals(record.getTreatmentName()));
JavaRDD<PurchasesDataObject> collectionTreatment = allRecords.filter(record -> "T1".equals(record.getTreatmentName()));
JavaRDD<PurchasesDataObject> collectionControlNW = collectionControl.filter(record ->{ return webLabSessionVideoWatchedList.get(record.getSessionId()) == null ? true : false; });
JavaRDD<PurchasesDataObject> collectionControlW = collectionControl.filter(record -> {return webLabSessionVideoWatchedList.get(record.getSessionId()) != null ? true : false;});
// Calculate metrics:
double totalOpsControl = getTotalOps(collectionControl);
double totalOpsTreatment = getTotalOps(collectionTreatment);
double totalOpsControlNW = getTotalOps(collectionControlNW);
double totalOpsControlW = getTotalOps(collectionControlW);
// .... Output results
private double getTotalOps(JavaRDD<PurchasesDataObject> dataCollection) {
return dataCollection
.mapToDouble(data -> data.getPrice() * data.getQuantity())
.sum();
}
可能不是最有效的方法（因为每个echo指的是相同的HTML元素）但它确实有效！
答案 0 :(得分：0)
你的条件重叠..
if(size>=2)
和
if(size>=3)
都会被调用..尝试用
替换它们if(size==2)
...........
if(size>=3)
答案 1 :(得分：0)
即使你解决了这个问题 - 正如我刚看到的那样，我也会发布我的回答。也许它会对你有所帮助。我不是100％肯定你在这些条件下想要达到的目标，但我想你想为$watchlistArray中找到的每个产品显示一个 col-sm-4 div。
实际上，除非您正在执行ajax请求以从db获取数据，否则不需要js。请注意，在我的代码中，我将变量$watchlistArray的名称更改为$products，因为我觉得它更适合我。原则上，代码读取产品列表中的所有产品并将其显示在 col-sm-4 单元格中。如果产品列表中的产品数超过行中可显示的最大产品数（在您的情况下为 3 ），则会创建一个新行。您可以按原样运行代码。
注意：尽量避免在js代码中使用php构造。 Php变量值可以作为参数传递给js函数，可以在html元素的事件属性（onclick，onload等）上调用。
<?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>