Question

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

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

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

function recalc(){

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

等...

完整代码在此处：http://jsfiddle.net/6ms4T/1/

任何帮助都将不胜感激。

Answer 1

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

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

Answer 2

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

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

JS Fiddle demo

参考文献：

match()。
Regexp。

Answer 3

您可以找到正在更改的元素的ID，然后提取其中的数字部分，以便在其余计算中使用。以下是我更改的方面和working version。：

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 selector：id*=blah。

使用“粗略”ID更新版本以查找：http://jsfiddle.net/6ms4T/22/

修改：

之前的jsfiddle未按预期处理更新总数。这个更新版本应该通过识别ID寻找DOM元素的所有情况来减少混淆;但是，重构的可能性很高：http://jsfiddle.net/6ms4T/24/。

修改：

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

Answer 4

更改recalc（）函数的开始如下;

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

... }

jQuery输入更新所有ID，而不仅仅是所需的ID

4 个答案: