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部分。