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

Question

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

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>';

所以现在，当我单击这些按钮( id是从变量设置的)时，我希望在div中有一些变化。所以我使用了一个JavaScript，我尝试为ID插入一个php回显，但是它不起作用：

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

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

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

Answer 1

如何对控制所有事件的单个事件处理程序使用data属性和class的示例(您可以删除回显中的换行符.我把它们放在这里是为了便于阅读堆栈溢出)：

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') +' €' );
    });
});

使用神奇的$(this)指的是当时点击的按钮。然后使用data引用.data('prezzo')属性。该属性包含一个html安全值(因为我不确定该变量中的确切内容)。