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

Question

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

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

所以我的问题：

我在 html 中使用什么来唯一标识每个 item/product 的值？

如何调整 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>.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>.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();

})

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

Answer 1

使 id 独一无二。

一种方法是将 data-id 附加到每个 input id。例如 id="orderQty001"。然后在JavaScript中可以根据点击元素的data-id:

找到对应的input

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

这里是 fiddle 并进行了这些更改：https://jsfiddle.net/7vwyh03h/。 HTML 除格式外没有变化。

编辑 (2/5)：我已将我的更改整合到您的 fiddle 中。我以前的所有更新编辑都包括在内。更新 fiddle： https://jsfiddle.net/aougb72r/。当您单击 'Add to Cart' 时，购物车会更新，您可以在控制台中看到并通过检查购物车。

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

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

这将确保我们不会无意中编辑 DOM，而实际上我们只想在该函数中操作购物车。

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

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

How do get my add to cart buttons to only use the value from that individual item?

html

javascript

jquery

shopping-cart

input