jquery - jQuery 输入会更新所有 ID，而不仅仅是所需的一个

Question

我遇到的问题很难解释，但我已经在 jsFiddle http://jsfiddle.net/6ms4T/1/中复制了它

我想要实现的是通过更新“数量”文本框，我想在其他地方显示值（下面的行我将称为“成本行”）。

基本上，更新第一个输入框 ( qty_item_1) 是更新quant_“成本行”中的所有 ( ) ID，而不仅仅是与该产品相关的 ID。

function recalc(){

$("[id^=quant_]").text($("input[id^=qty_item_]").val());

ETC...

完整代码在这里：http: //jsfiddle.net/6ms4T/1/

任何帮助，将不胜感激。

score 1 · Accepted Answer

添加一个包含有关您的输入的信息的属性。我添加了一个属性“rel”，第一个输入值为 1，第二个输入值为 2，然后使用此 rel 为 li 元素构建正确的 id。

这是一个更新的工作 jsFiddle：http: //jsfiddle.net/6ms4T/8/

score 0 · Accepted Answer

您可以使事情相对简洁，并通过识别的数字组件并将事件仅应用于特定元素id，然后将该数字用作选择器的一部分：

var idNum = this.id.match(/\d+/);
$("#quant_" + idNum).text($("#qty_item_" + idNum).val());

参考：

score 0 · Accepted Answer

您可以找到正在更改的元素的 id，然后提取其中的数字部分以用于其余的计算。这是我更改的方面和工作版本。：

var uniqueOne = $(this).attr("id").match(/\d+/);
$("[id^=quant_][id$="+uniqueOne+"]").text($("input[id^=qty_item_][id$="+uniqueOne+"]").val());

虽然不是最干净的代码，但它的作用是找到以 quant_ 开头并以 uniqueOne 结尾的 id。您可能可以压缩这些，但它突出显示了结合两个选择器（开头和结尾）。

看起来你有很多很棒的想法可供选择。

编辑：

如果您的 id 不以 qty_item_ 开头，那么您需要使用不同的选择器。这个最容易实现的目标是contains 选择器: id*=blah。

带有“总”ID 的更新版本可以找到：http: //jsfiddle.net/6ms4T/22/

编辑：

以前的 jsfiddle 没有按预期处理更新总数。此更新版本应通过识别所有通过 ID 查找 DOM 元素的情况来减少混淆；但是，很有可能应该对其进行重构：http: //jsfiddle.net/6ms4T/24/。

编辑：

OP 的标签在他的 ID 中生成了各种数字和字母，但最后的数字前面有一个下划线。因此，使用 regex 找到了重要的 id /\d+$/。正如其他海报所示，解决这个问题的方法不止一种。我个人喜欢用户 gabitzish 的。

score 0 · Accepted Answer

更改 recalc() 函数的开始，如下所示；

function recalc(e){
    var idx = $(e.target).attr('id').split('_').pop();
    $("[id^=quant_" + idx + "]").text($(e.target).val());

... }

4 回答 4