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来证明这一点。