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

Question

我有一个 PHP 数组中的数据，我想将其转换为按钮。

为简单起见，这些按钮将console.log()它们在点击时的数据。

现在我正在使用内联事件处理程序来执行此操作。

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

<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);
});