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

【问题标题】：PHP/HTML/JavaScript - Creating buttons with data attributes from PHP to HTML/JavaScriptPHP/HTML/JavaScript - 创建具有从 PHP 到 HTML/JavaScript 的数据属性的按钮
【发布时间】：2021-08-17 16:41:38
【问题描述】：

我的 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>";
}

?>

【问题讨论】：

标签： javascript php html jquery css

【解决方案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);
});

【讨论】：

您的第一个代码段有引号问题。
@NigelRen 感谢您的提醒。修好了。
谢谢！！！！这正是我所需要的。真的很感激！

【解决方案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)
 
}

【讨论】：