如何让我的添加到购物车按钮仅使用该单个项目的价值？

Question

我正在为我的农民朋友建立一个种子电子商务网站，以帮助建立我的投资组合并为他节省一些美元。我是初学者，所以这是一次很好的学习经历。

现在，在添加到购物车之前，我在输入用于商品数量的数字输入字段时遇到了问题。我正在使用“id”标签，我知道这是错误的，但我不知道该使用什么，以便一个项目的价值不会影响另一项目的价值。

所以我的问题：

我在我的 html 中使用什么来唯一标识每个项目/产品的价值？

如何调整我的 javascript 以区分每个项目的唯一数量？

更新的 HTML

<div class="container">    
<div class="row">
<div class="col-sm-4">
<div class="panel panel-success">
<div class="panel-heading"><a href="Varieties 
Grains/amaranth_hopireddye.html">Hopi Red Dye</a></div>
<div class="panel-body"><a href="Varieties 
Grains/amaranth_hopireddye.html"><img 
src="Images/amaranth_hopireddye.jpg" class="img-responsive" 
style="width:100%" alt="Image"></a></div>
<div class="panel-footer">500 seeds per packet<br>$4.00 per 
Packet</div>
<div class="panel-footer"><div align="center"><input type="number" 
id="orderQty001" value="1" style="width: 50px; margin-right: 10px;"><a 
href="#" class="productItem btn btn-primary center-block" data-
name="Hopi Red Dye " data-s="500 seeds" data-price="400" data-
id="001">Add to Cart</a></div></div>
</div>
</div>
<div class="col-sm-4">
<div class="panel panel-success">
<div class="panel-heading"><a href="Varieties 
Grains/amaranth_dedosdedios.html">Dedos de Dios</a></div>
<div class="panel-body"><a href="Varieties 
Grains/amaranth_dedosdedios.html"><img 
src="Images/amaranth_dedosdedios.jpg" class="img-responsive" 
style="width:100%" alt="Image"></a></div>
<div class="panel-footer">500 seeds per packet<br>$4.00 per 
Packet</div>
<div class="panel-footer"><div align="center"><input type="number" 
id="orderQty002" value="1" style="width: 50px; margin-right: 10px;"><a 
href="#" class="productItem btn btn-primary center-block" data-
name="Dedos de Dios " data-s="500 seeds" data-price="400" data-
id="002">Add to Cart</a></div>
</div>
</div>
</div>

更新的 Javascript：

var shopcart = [];
$(document).ready(function () {
outputCart();
$(".productItem").click(function (e) {
e.preventDefault();
var iteminfo = $(this.dataset)[0];
var inputId = "orderQty" + this.attr('data-id');
iteminfo.qty = document.getElementById(inputId).value;

var itemincart = false;
$.each(shopcart, function (index, value) {
//console.log(index + '  ' + value.id);
if (value.id == iteminfo.id) {
value.qty = parseInt(value.qty) + parseInt(iteminfo.qty);
itemincart = true;
}
})
if (!itemincart) {
shopcart.push(iteminfo);
}
sessionStorage["sca"] = JSON.stringify(shopcart);
outputCart();

})

我也尝试为每个元素分配一个类和唯一的 id，但是我不知道如何在我的 javascript 中获取唯一的用户输入。

Answer 1

使ids 独一无二。

一种方法是将data-ids 附加到每个input id。例如id="orderQty001"。然后在JavaScript中你可以根据点击元素的data-id找到对应的输入：

var inputId = "orderQty" + this.attr('data-id'); // 'this' is the clicked <a> element
iteminfo.qty = document.getElementById(inputId).value;

我认为 JavaScript 的其余部分可以保持不变。

编辑（1/31）：由于仍然存在问题，我启动了一个 jsFiddle 来运行代码。首先，我发现点击处理程序中的this 不是一个jQuery 对象，而是一个DOM 元素。因此，attr 不是函数，我们必须使用 getAttribute，如下所示：

var inputId = "orderQty" + this.getAttribute('data-id');

接下来，我注意到一个错误，即购物车项目的 qty 未正确设置。我发现问题代码是iteminfo.qty = document.getElementById(inputId).value;。这个语句是一个问题，因为它比我们想要的更早地操作 DOM。也就是说，它立即在元素上设置qty，而不是在我们计算新的qty 之后。因此，我们应该声明一个临时变量来保存input 的value：

var qtyToAdd = document.getElementById(inputId).value;

此外，我们现在必须在首次将其添加到购物车之前设置iteminfo.qty：

if (!itemincart) {
    iteminfo.qty = parseInt(qtyToAdd);
    shopcart.push(iteminfo);
}

这里是这些变化的小提琴：https://jsfiddle.net/7vwyh03h/。除了格式之外，HTML 没有改变。

编辑 (2/5)：我已将我的更改集成到您的小提琴中。我以前的所有更新编辑都包括在内。更新的小提琴： https://jsfiddle.net/aougb72r/。当您单击“添加到购物车”时，购物车会更新，您可以在控制台中看到并检查购物车。

我又改变了一件事情，就是让iteminfo 成为dataset 的克隆：

var iteminfo = Object.assign({}, $(this.dataset)[0]);

当我们真的只想在该函数中操作购物车时，这将确保我们不会意外编辑 DOM。

检查一下，看看您是否仍然发现任何问题。