Question

我正在尝试使用data属性将页面更改为索引网页中所选产品的详细信息。这些是我目前正在使用的功能。这有效，但它只显示文档的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;
}

单击一个元素后，控制台告诉我在解析selectedProduct函数中的第3行后，data.detail未定义。我想知道是否有人能告诉我为什么会这样，如果我是愚蠢而没有发现问题。

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中使用数据属性

1 个答案: