javascript - 如何克服将单个静态值传递给函数的问题？

Question

我显示的按钮数量与查询中的行数一样多。每行都有自己的名称和属性。当我点击任何按钮时，它应该将该特定值传递给函数。但是，当我尝试使用以下代码时，如果我单击任何按钮，它只会传递第一个值。

<?php  
while ($rec = mysql_fetch_array($query)) {  
        echo "<figure>";
        echo "<button onclick='change()' title='".$rec["UserName"]."' class='fa fa-user' id='myButton1' value='".$rec["UserName"]."' style='font-size:100px;color:red'></button>";
        echo "<figcaption>".$rec["UserName"]."</figcaption>";
        echo "</figure>";
        //echo "</a>";
    }
?>

<script type="text/javascript">
function change()
{   
    var elem = document.getElementById("myButton1");
    alert(elem.value);    
    // SQL Query and display the results in a proper table <?php echo "<table><tr><td>".elem.value."</td></tr></table>"; ?>   
}  
</script>  

如何让它传递动态值(点击任何按钮，它应该传递相应的值)？

Answer 1

id 值在 HTML 中必须是唯一的。具有相同 id 的多个元素是无效的，并且不会按预期工作。 p>

您根本不需要id。相反，最小的更改是将 this 传递到您的函数中:

<button onclick='change(this)' ... >

在你的函数中

function change(btn) {
    alert(btn.value);
}

但真正的答案是不要使用onclick 属性事件处理程序。它们是 1990 年代中期的技术。 20 年来，事情发生了变化。

在这种情况下，我会在所有这些图形所在的容器上使用委托(delegate)处理程序。可能有一个离它们更近的容器可供您使用，但在最坏的情况下，您可以使用 document.body :

在按钮上放置一个通用的识别特征(比如，一个类)，然后:

$(document.body).on("click", ".the-class", function() {
    alert(this.value);
});

一个处理程序处理所有按钮，因为 click 气泡。

同样，您可能想要一个更靠近图形列表的容器，而不是 document.body。