对每一行(单独的值)使用相同的jQuery函数

Question

我想在每次用户更新行中的Quantity时用jQuery更新每一行的价格计算。

有许多行包含不同的项。每行都有自己的id。每行有一个Qty输入字段和一个具有相同类的输出字段。

这是与案例相关的基本HTML:

<div id="item1">
<div><input class="itemQty" onchange="alterQty()"></div>
<div><span class="itemPrice"></span></div>
</div>
<div id="item2">
<div><input class="itemQty" onchange="alterQty()"></div>
<div><span class="itemPrice"></span></div>
</div>

这是我目前用到的jQuery函数:

function alterQty() {
var rowID = $('.itemQty.').parent().parent().attr('id');
var rowQty = '#' + rowID + ' .itemQty';
var rowPrice = '#' + rowID + ' .itemPrice';
iQty = $(rowQty).val();
var iRetail = "100"; //(For the sake of this question this doesn't matter yet)
var itemPriceCalc = iRetail * iQty;
$(rowPrice).text(itemPriceCalc);
};

在上面的代码中，任何Qty都会更新第一行的价格。所有后续行都不受影响。"rowID"被返回的似乎总是"item1"…

要使此函数适用于每个特定的Qty并仅将输出提供给该特定行的Price字段，我缺少什么?

我可以用一个新名字把同一个函数写一百遍，但是一定有更好的方法来做到这一点…

Answer 1

使用jquery函数(而不是DOM onclick=)，您将获得触发事件的元素为this。这将允许您使用相对DOM导航并删除'#'+rowID

删除ID(不需要这个，你可能需要它的其他东西)，并删除onclick=

<div>
<div><input class="itemQty"></div>
<div><span class="itemPrice"></span></div>
</div>
<div>
<div><input class="itemQty"></div>
<div><span class="itemPrice"></span></div>
</div>

然后添加一个jquery事件，以this为起点。

$(".itemQty").on("change", function() {
// `this` is now the element being changed
var row = $(this).parent().parent();
var rowQty = $(this);
var rowPrice = row.find(".itemPrice");
var iQty = $(rowQty).val() * 1;
var iRetail = "100"; //(For the sake of this question this doesn't matter yet)
var itemPriceCalc = iRetail * iQty;
rowPrice.text(itemPriceCalc);   
});

请注意，如果你动态添加行(即在页面加载和上面的代码运行之后)，你将需要事件委托。把

$(".itemQty").on("change", function() {

$(document).on("change", ".itemQty", function() {

(理想情况下使用更接近的静态元素，如$("#rowContainer")而不是document)。