PHP/HTML/JavaScript-创建具有从PHP到HTML/JavaScript的数据属性的按钮

Question

我有一个PHP数组中的数据，我想把它变成按钮。

为了简单起见，这些按钮将在单击时console.log()其数据。

现在我正在使用内联事件处理程序来完成这项工作。

如何使用数据属性而不使用内联事件处理程序来解决此问题？我知道如何创建数据属性，但不知道如何记录数据并将事件侦听器绑定到按钮。

<script>
function logData(lat, long) {
console.log(lat);
console.log(long);
}
</script>
<?php
$coordinates = array(
first => array(
"lat" => "64",
"long" => "89"
),
second => array(
"lat" => "23",
"long" => "11"
),
third => array(
"lat" => "35",
"long" => "76"
)
);
// Create buttons with inline event handlers
foreach($coordinates as $point) {
echo "<button onclick='logData(".$point["lat"].", ".$point["long"].")'>Button</button>";
}
echo "<br><br>";
// Create buttons with data attributes. How do you log the data without inline event handlers?
foreach($coordinates as $point) {
echo "<button data-lat=".$point["lat"]." data-long=".$point["long"].">Button</button>";
}
?> 

Answer 1

给每个按钮一种识别它们的方法，比如class属性值。

foreach($coordinates as $point) {
echo '<button class="point-button" data-lat="' . $point["lat"]. '" data-long="' . $point["long"] . '">Button</button>';
}

在JavaScript中，选择具有该特定类的所有按钮，并侦听每个按钮的click事件。

激发的单击事件提供有关正在单击的元素的信息。该引用存储在事件对象的target属性中。

现在您已经单击了按钮，读取该按钮的dataset属性。它应该具有元素上每个data-*属性的属性，名称中没有data-部分。因此，例如，data-lat被表示为dataset.lat。

// Log function.
function logData(lat, long) {
console.log(lat, long);
}
// Get all buttons with the point-button class.
const buttons = document.querySelectorAll('.point-button');
// Click event handler
function onButtonClick(event) {
const currentButton = event.target;
const lat = currentButton.dataset.lat;
const long = currentButton.dataset.long;
logData(lat, long);
}
// For each button, add an event listener for the click event. 
// Call logData when a click happens.
buttons.forEach(button => {
button.addEventListener('click', onButtonClick);
});

Answer 2

你可以简单地像这样做

function hello(event){
alert(event.dataset.lat)
}

<button onclick="hello(this)" data-lat="hello">
save
</button>

在您的情况下是

foreach($coordinates as $point) {
echo '<button class="point-button" data-lat="' . $point["lat"]. '" data-long="' . $point["long"] . '" onclick="loadData(this)">Button</button>';
}

和js

function loadData(event) {
const lat = event.dataset.lat
const lon = event.dataset.long
console.log(lat, long)

}