Javascript 如何使用mysql变量在点击按钮时动态更改div内容

我对一些动态按钮有问题，这些按钮是由while循环生成的：

while($sub_row=mysqli_fetch_array($piano_query)){ 
    $piano=$sub_row['piano'];
    $prezzo_piano=$sub_row['prezzo'];
    $id_appartamenti=$sub_row['id_appartamenti'];

    echo '<button type="button" class="simple-text piano" id="'.$id_appartamenti.'">piano '.$piano.'<br></button>';

while（$sub_row=mysqli_fetch_数组（$piano_query））{
$piano=$sub_行['piano']；
$prezzo_piano=$sub_row['prezzo']；
$id_appartanti=$sub_行['id_appartanti']；
回音“钢琴”。$piano.“
”；

现在，我希望当我点击这些按钮（id是从变量设置的）时，div中的某些内容会发生变化。 因此，我使用了JavaScript，并尝试为ID插入一个php回音，但不起作用：

$(document).ready(function() {
    $("#<?php echo $id_appartamenti?> ").click(function() {
        document.getElementById("prezzo").innerHTML="<?php echo $prezzo_piano;?> €";
    });
})

$（文档）.ready（函数（）{
$（“#”）单击（函数（）{
document.getElementById（“prezzo”）.innerHTML=“€”；
});
})

然后在id=prezzo的div中发生了一些事情：

<div class="paragraph" id="prezzo">something has to happen here €</div>

这里一定发生了什么事€

一个示例，说明如何将

数据

属性和

类

用于控制所有属性的单个事件处理程序（您可以删除echo中的换行符…我将它们放进去以便阅读）：

---

使用神奇的

$（此）

仅指当时单击的按钮。然后使用

.data（'prezzo'）

引用

数据

属性。该属性包含html安全值（因为我不确定该变量中的确切内容）。

您提到“它不起作用”。然后它会做什么？您在浏览器控制台中是否有任何错误？向我们显示呈现的/客户端HTML/JS代码！您应该使用

数据

属性和

类

处理程序来执行此操作，而不是为每个

id

元素动态生成JS单击处理程序。您正在从

$prezzo\u钢琴

变量B设置idle，但您正在从

$ID\u appartamenti

的ID上添加事件侦听器，在其中，您将按钮中的文本替换为

$prezzo\u piano

？这似乎有些奇怪。但是，我建议您按照@IncredibleHat的建议进行操作。每个按钮不需要单独的事件处理程序。是的，出现了一个错误，我想这样做回想一下ID=ID\u appartamenti和事件监听器是一样的……嗨@creditablehat，我怎么能做到呢？对不起，我刚刚开始学习php和js

while($sub_row=mysqli_fetch_array($piano_query)) {
    echo '<button type="button" 
           class="event-hook-class simple-text piano" 
           id="'. $sub_row['id_appartamenti'] .'" 
           data-prezzo="'. htmlspecialchars($sub_row['prezzo'],ENT_QUOTES) .'" 
          >piano '. htmlspecialchars($sub_row['piano']) .'</button><br>';
}

echo '<div class="paragraph" id="prezzo">Placeholder €</div>';

$(document).ready(function() {
    $(".event-hook-class").click(function(e) {
        e.preventDefault();
        $("#prezzo").html( $(this).data('prezzo') +' €' );
    });
});