Question

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

现在我在添加到购物车之前遇到用于商品数量的数字输入字段时遇到问题。我正在使用＆＃34; id＆＃34;标签，我知道这是错误的，但我无法弄清楚要使用什么，以便一个项目的价值不会影响另一个项目的价值。

所以我的问题：

我在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

使id唯一。

执行此操作的一种方法是将data-id附加到每个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来运行代码。首先，我发现click处理程序中的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。

检查一下，看看你是否还有任何问题。

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

1 个答案: