在循环中捕获数据时的Javascript问题
在循环中捕获数据时的Javascript问题
提问于 2018-09-16 04:02:53
我尝试从数据库中循环多个值，每次单击菜单上的特定项时，Javascript只捕获出现在数据库中的第一个值，即使函数在循环中，即使我单击最后一项，第一项仍然显示...如何修复？这是我的代码。(结果显示在顶部，我没有包含它)
<?php
$res = mysqli_query($db,"select * from menu where Restaurant_id='$id' order by Food_name asc") or die("Error: " . mysqli_error($db));
while($rows = mysqli_fetch_array($res)){
$f_id = $rows['Menu_id'];
$fname = $rows['Food_name'];
$fprice = $rows['Price'];
?>
<div class="col-12 helv menu rounded">
<ul class="nav navbar-nav navbar-expand-md">
<li class="nav-item"><img class="rounded" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Generic placeholder image" width="180" height="180"></li>
<li class="nav-item marginleft">
<br>
<input id="foodname" value="<?php echo $fname;?>" style="display: none;"><h5><b><?php echo $fname;?></b></h1></input><br>
<input id="foodprice" value="<?php echo $fprice;?>" style="display: none;"><h5>Php <?php echo $fprice;?>.00</h1></input>
</li>
<li class="nav-item" style="position: absolute; margin-left: 90%">
<button class="fa fa-plus btn btn-danger" onclick="add()"> Add</button>
</li>
</ul>
<br>
</div>
<script>
function add() {
var fdname = document.getElementById("foodname").value;
var fdprice = document.getElementById("foodprice").value;
document.getElementById("display").innerHTML = fdname;
document.getElementById("display1").innerHTML = fdprice;
}
</script>
<?php } ?> 回答 3
Stack Overflow用户
回答已采纳
发布于 2018-09-16 04:14:55
<?php
// As Jeto said, you should use prepared statement
$res = mysqli_query($db,"select * from menu where Restaurant_id='$id' order by Food_name asc") or die("Error: " . mysqli_error($db));
while($rows = mysqli_fetch_array($res)){
$f_id = $rows['Menu_id'];
$fname = $rows['Food_name'];
$fprice = $rows['Price'];
?>
<div class="col-12 helv menu rounded">
<ul class="nav navbar-nav navbar-expand-md">
<li class="nav-item"><img class="rounded" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Generic placeholder image" width="180" height="180"></li>
<li class="nav-item marginleft">
<br>
<input class="foodname" value="<?php echo $fname;?>" style="display: none;"><h5><b><?php echo $fname;?></b></h1></input><br>
<input class="foodprice" value="<?php echo $fprice;?>" style="display: none;"><h5>Php <?php echo $fprice;?>.00</h1></input>
</li>
<li class="nav-item" style="position: absolute; margin-left: 90%">
<button class="fa fa-plus btn btn-danger" onclick="add('<?php echo $fname;?>', <?php echo $fprice;?>)"> Add</button>
</li>
</ul>
<br>
</div>
<?php } ?>
<script>
function add(fdname, fdprice) {
document.getElementById("display").innerHTML = fdname;
document.getElementById("display1").innerHTML = fdprice;
}
</script> Stack Overflow用户
发布于 2018-09-16 04:14:39
首先获取while查询之前有多少项的计数
$res = mysqli_query($db,"select * from menu where Restaurant_id='$id' order by Food_name asc") or die("Error: " . mysqli_error($db));
$count_of_items = mysqli_num_rows($res);然后运行while查询，然后根据项数在窗体内运行for循环
for($x=0;$x<count($count_of_items); $x++){
<input id="foodname" value="<?php echo $fname[$x];?>" style="display: none;"><h5><b><?php echo $fname[$x];?></b></h1></input><br>
<input id="foodprice" value="<?php echo $fprice[$x];?>" style="display: none;"><h5>Php <?php echo $fprice[$x];?>.00</h1></input>
}Stack Overflow用户
发布于 2018-09-16 04:20:58
还有更多的错误。
1) ID是唯一的
请检查此https://stackoverflow.com/a/12889416/3742228
2)复制JS函数
您创建的每个循环都会创建另一个名为"add“的JS函数。如果您创建了3个名为"add“的函数，当您编写add()时，您想调用哪个函数？:)
对于您的代码，有更多的解决方案，但这取决于您到底想要做什么。看看这个：
<?php
$res = mysqli_query($db,"select * from menu where Restaurant_id='$id' order by Food_name asc") or die("Error: " . mysqli_error($db));
while($rows = mysqli_fetch_array($res)){
$f_id = $rows['Menu_id'];
$fname = $rows['Food_name'];
$fprice = $rows['Price'];
?>
<div class="col-12 helv menu rounded">
<ul class="nav navbar-nav navbar-expand-md">
<li class="nav-item"><img class="rounded" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Generic placeholder image" width="180" height="180"></li>
<li class="nav-item marginleft">
something here
</li>
<li class="nav-item" style="position: absolute; margin-left: 90%">
<button class="fa fa-plus btn btn-danger" foodName="<?php echo $fname;?>" foodPrice="<?php echo $fprice;?>" onclick="add(this)"> Add</button>
</li>
</ul>
<br>
</div>
<?php } ?>
<script>
function add(e) {
var fdname = e.getAttribute("foodName");
var fdprice = e.getAttribute("foodPrice");
document.getElementById("display").innerHTML = fdname;
document.getElementById("display1").innerHTML = fdprice;
}
</script> 页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52348394
复制相关文章
相似问题