-1

作为 JavaScript 新手，我无法想出解决此问题的方法。

我希望每个“添加到购物车”按钮都调用相同的功能“AddtoCart”。我已经实现了这一点，但是以内联 JavaScript 为代价——这是我想避免的。

onclick= "AddToCart(document.getElementById('toy_title1').innerHTML,document.getElementById('toy_quantity1').value,document.getElementById('toy_price1').innerHTML)

那么我将如何实现将其作为外部 JavaScript 文件的一部分，记住我必须能够将其应用于所有 4 个独特的项目

4

2 回答 2

1

那么你应该阅读更多关于addEventListener（标准）和attachEvent（IE）

//assume element means the button
//you can use getElementsByTagName, getElementsByClassName, querySelectorAll etc.
//to fetch your elements

//DRY, store the operation in a function so it's reusabe and not written twice
function thisFunction(){
    AddToCart(document.getElementById('toy_title1').innerHTML,
        document.getElementById('toy_quantity1').value,
        document.getElementById('toy_price1').innerHTML)
}

if(element.addEventListener){                      //check if the standard is supported
    element.addEventListener('click',function(){   //use it to add the handler
        thisFunction();
    });
} else {
    element.attachEvent('onclick',function(){      //else, we use IE's version
        thisFunction();
    }, false);
}
于 2012-05-05T00:16:41.697 回答
1

你可以这样改变你的功能：

function AddToCart(toyId) {
  var title = document.getElementById('toy_title'+toyId).innerHTML;
  var quantity = document.getElementById('toy_quantity'+toyId).value;
  var price = document.getElementById('toy_price')+toyId).innerHTML
}

然后在每个按钮上，您只需传递玩具的 ID

请注意价格等敏感数据，将其保留在 Javascript 上（我想您将在此之后将其发送到您的后端）是危险的，它很容易被操纵。

但如果你的意图只是一个测试或类似的东西，没关系。

编辑：要调用你的这个函数，你会做这样的事情：

onclick="AddToCart(1)"

其中 1 是您的玩具 ID，您应该将其更改为 2,3...，具体取决于您的玩具。

于 2012-05-05T00:19:20.387 回答