在 JavaScript 中使用数据属性

Question

我正在尝试使用数据属性将页面更改为有关我的索引网页中所选产品的详细信息。这些是我目前正在使用的功能。这有效，但它只会显示文档的 innerHTML。而我想要有关存储在名为 data-detail 的数据属性中的对象的所有数据。 responseText 将与此类似：

data-detail='{"ID":"1", "Name":"Some Name", "Description":"Some Description", "Price":"100", "Photo":"SomePath/AnotherPath/Image.png"}'

function displayItems(results){
  article = document.getElementById("homeSection");
  string = '<h1>Company Name</h1><h2>Why not try these products?</h2>';
  for(var i=0; i<results.length; i++){
    var price = parseFloat(results[i].Price);

    var sec = document.createElement("section");
    sec.classList.add("homeItem");
    sec.dataset.detail = JSON.stringify(results[i]);
    article.appendChild(sec);
    sec.innerHTML = '<div class="imageContainer"><img class="resultsImage" src="' + results[i].Photo + '"></div><p class="resultsName">' + results[i].Name + '</p><p class="resultsPrice">£' + price.toFixed(2) + '</p>';
    var items = document.querySelectorAll(".homeItem");
    for(i=0; i<items.length; i++){
      items[i].addEventListener("click", selectedProduct);
    }
  }
}


function selectedProduct(event){
  target = event.currentTarget;
  homeSection = document.getElementById("homeSection");
  console.log(target.detail.ID);
  homeSection.innerHTML = target.innerHTML;
}

单击某个元素后，控制台告诉我 data.detail 在 selectedProduct 函数中向下解析第 3 行后未定义。我想知道是否有人可以告诉我这是为什么，我是不是太傻了，没有发现问题。

Answer 1

由于只能存储字符串值，所以获取值后，需要调用JSON.parse()转换回对象。您还需要在设置值时使用数据集来获取值。

function selectedProduct(event){
  target = event.currentTarget;
  homeSection = document.getElementById("homeSection");
  console.log(JSON.parse(target.dataset.detail).ID);
  homeSection.innerHTML = target.innerHTML;
}

在 JavaScript 中使用数据属性

Using data attributes in JavaScript

javascript

custom-data-attribute