在JavaScript中使用数据属性

Using data attributes in JavaScript

本文关键字：数据属性 JavaScript      更新时间：2023-09-26

我正在尝试使用data属性将页面更改为索引网页中所选产品的详细信息。这些是我目前正在使用的功能。这是有效的，但它只会显示文档的内部HTML。而我想要关于对象的所有数据，这些数据存储在一个名为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;
}

单击某个元素后，控制台会告诉我，通过selectedProduct函数中的第三行进行解析后，data.detail是未定义的。我想知道是否有人能告诉我为什么会这样，我是否很傻，没有发现问题。

由于只能存储字符串值，因此在获取值后，需要通过调用JSON.parse（）将其转换回对象。在设置值时，还需要使用dataset来获取值。

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