PHP，MySQL，HTML / CSS和javascript-带有模态框弹出框的While循环和按钮

Question

因此，我为此一直在绞尽脑汁，但我仍然无法弄清楚。 我只有PHP和Modal Boxes和Javascript的基本知识。 所以这是我的关注...

我有PHP从数据库中获取MySQL数据，并将这些数据放在网站上的表格中[请记住，这是一家快餐店的网站]。 我有一个while循环，该循环运行并在表中添加每个记录，并且为每个项目添加一个ORDER按钮。 每个按钮旨在打开一个带有相关项目信息的模式框（以便我可以将其添加到购物车中：尽管我确实有购物车的顺序）。

问题：
只有第一项的[ORDER]按钮会打开一个模式框。 其他按钮不要打开模态框。

<?php
$con = mysqli_connect("localhost","root","root","mcd");
if(!$con){
    die("Can not connect".mysql_error());
}
$query = mysqli_query($con, "select * from pizza");
echo "<table border=1 align='center' width=50%>
<tr>
<th>Name</th>
<th>Medium</th>
<th>Large</th>
</tr>";
    while ($record = mysqli_fetch_array($query)) {
        echo "<tr>";
        echo "<td align='right'>".$record['pizzaName']."</td>";
        echo "<td align='right'> R".$record['PriceMedium']."</td>";
        echo "<td align='right'> R".$record['PriceLarge']."</td>";
        echo "<td align='right'> <input id='myBtn' type='button' value='ORDER'/>";
        echo "</tr>";
   }
   echo "</table>";
?>

Answer 1

我认为您的问题出在您的输入定义了ID但没有类的事实。

由于ID打算在页面上唯一，因此如果您将JavaScript函数绑定到ID选择的元素上，则仅绑定具有该ID的第一个元素。

我建议你用

class='myBtn'

代替

id='myBtn'

然后相应地调整您的JavaScript部分。