捕获循环数据时的Javascript问题

我尝试循环一个数据库中的多个值，每次单击菜单上的某个特定项时，Javascript只捕获数据库中出现的第一个值，即使函数在循环中，即使单击最后一个项，第一个项仍然显示。。。如何修复？这是我的密码。（结果显示在顶部，我没有包括在内）

---

在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>
}

对于（$x=0；$x
还有一些错误

1） ID是唯一的
请检查这个

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> 

欢迎光临。给定ID只能有一个HTML（DOM）元素。您的
add
函数需要位于循环之外，并获取依赖于该项的参数。另外，请看一看，因为您的SQL查询似乎非常不安全。
按钮
元素应该具有
数据foodname
和
数据foodprice
属性，而不是
foodname
和
foodprice
，不是吗？不，您可以将想要的名称作为属性，而不是name/id/class，等等@mihaizinclescu这是一种不好的做法，因为这会产生一个无效的文档（尽管存在该文档可以更改该文档）。
<?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> 

<?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>