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

Question

http://jsfiddle.net/bald1/Su97P/2/

我不知道这段代码有什么问题。我想单击绿色 div，然后单击将“data-productName”添加到“购物车”。

   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);

Answer 1

将其更改为 productname，因为数据属性在您的情况下是小写的(驼峰式以防第一个连字符之后的任何更多连字符)并添加到数据集中，您需要访问它作为 productname 而不是 productName。

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

如果您的属性是 data-product-name，

productName 将起作用。

参见 documentation关于规则。

• 删除任何破折号 (U+002D)；
• 破折号 (U+002D) 之后的任何字母，在删除之前，都设置为对应的大写字母。