Question

我对某些动态按钮有问题，这些按钮是由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>';

所以现在，我希望当我单击这些按钮（ID是从变量设置）时，div中会有一些变化。因此，我使用了JavaScript，并尝试为ID插入php echo，但无法正常工作：

$(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安全值（因为我不确定该变量的确切含义）。

如何使用mysql变量动态更改按钮的onclick onclick

1 个答案: