javascript - 是否可以将 id 名称分配给变量并在 javascript 的函数中使用它

Question

我正在创建一个 html 表单，它将获取项目输入中的数量值并计算单个总成本并将其显示在每个输入框旁边，并在表单底部显示总计。我正在使用 JS 和 KeyUp 函数来完成此操作，并尝试迭代该函数。

我的 HTML

<p><span>T-Shirts </span> <input type="number" name ="tshirts" value="0" id="tshirts">&nbsp;&nbsp;<span class="tshirtscost">0</span><br></p>
<p><span>Shirts </span> <input type="number" name ="shirts" value="0" id="shirts">&nbsp;&nbsp;<span class="shirtscost">0</span><br></p>
<p><span>Kurtas </span> <input type="number" name ="kurtas" value="0" id="kurtas">&nbsp;&nbsp;<span class="kurtascost">0</span><br></p>

<div id="totalcost"></div>

我的JS

var item = ["T-Shirt/s","Shirt/s","Kurta/s"];
var itemcost=100;
var text = "";
var i;

for (i = 0; i < item.length; i++) {
 text = item[i].replace(/ |-|&|\//g, '').toLowerCase();

 itemid="#" + text;
 itemclass="." + text + "cost";

 $(itemid).keyup(function(){
    var x = $(itemid).val();
    $(itemclass).css("background-color", "pink").html("Rs."+ (x * itemcost));
    totalcost();

});

function totalcost(){
var tot=$('#tshirts').val()*itemcost + $('#shirts').val()*itemcost + $('#kurtas').val();
    $("#totalcost").css("background-color", "pink").html("<span style='font-weight:700'>Total Cost : </span>Rs."+tot);
  }
}

之所以要迭代js操作，是因为我表单中有很多需要输入和计算的项目。

但是，我不确定尝试创建具有类名的变量并在函数中使用它是否可行。但如果可以做类似的事情，我将节省为每个项目编写大量代码的时间。

此代码不起作用。可能是出于我看不到的明显原因。任何帮助将不胜感激。

Answer 1

您需要使用内部函数，因为 this .

在您的示例中，您正在循环中更新两个变量 - itemid 和 itemclass。但是您在 .keyup 中注册的每个函数都不会记住这些变量的值，而是记住变量本身。由于在最后一个循环之后这些变量将包含最后一个值，因此所有回调都将使用 itemid 和 itemclass 的最后一个值。 这就是为什么您需要使用内部函数，因此内部函数每次都会使用正确的值创建 id 和 cls 变量。 我们正在寻找的可能是这样的:

$(itemid).keyup((function (id, cls) {
    return function () {
        var x = $(id).val();
        $(cls).css("background-color", "pink").html("Rs." + (x * itemcost));
        totalcost();
    }
}(itemid, itemclass)));

我创建了a plunker来证明这一点。