如何使用数据集访问数据属性值

How to access the data attribute value using data set

本文关键字：数据属性 访问 数据集 何使用      更新时间：2023-09-26
http://jsfiddle.net/bald1/Su97P/2/

我不知道这段代码有什么问题。我想单击绿色div，然后单击将"数据产品名称"添加到"购物车"。

   var cart = []; 
var cartElement = document.getElementById("cart");

function addToCart(productName) {
   cart.push(productName); 
   cartElement.innerHTML = cart.join("<br>");  
}

var someDiv = document.getElementById("product");
someDiv.addEventListener("click", function() {
   var str = someDiv.dataset.productName; 
   addToCart(str); 
}, false);

将其更改为 productname ，因为数据属性在您的情况下是小写的（如果第一个连字符之后有更多的连字符，则大写）并添加到数据集中，因此您需要以productname而不是productName访问它。

someDiv.addEventListener("click", function() {
   var str = someDiv.dataset.productname; 
   addToCart(str); 
}, false);

productName 如果您的属性被data-product-name，它将起作用.

请参阅有关规则的文档。

  • 删除任何破折号 （U+002D）;
  • 在删除短划线 （U+002D） 之后的任何字母都设置为大写对应项。
相关文章：