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

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，因为在您的情况下数据属性是小写的（如果在第一个之后有更多的连字符，则会发生变化）并添加到数据集中，您需要将其作为{{1}访问而不是productname。

productName

如果您的属性为someDiv.addEventListener("click", function() { var str = someDiv.dataset.productname; addToCart(str); }, false); ，则

productName将有效。

有关规则，请参阅documentation。

• 删除任何短划线（U + 002D）;
• 短划线（U + 002D）之后的任何字母，在删除之前，都以大写字母设置。