是否可以将 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操作的想法是因为我在表单中输入和计算的项目很多。

但是，我不确定尝试创建一个名称为 class 的变量并在函数中使用它是否可行。但是如果可以做类似的事情，我会省去为每个项目写很多行代码。

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

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

Answer 2

您可以向所有 input 元素注册一个事件，而无需手动遍历每个元素。

jQuery('p > input').keyup(function() {
  // handle keyup event
});

这段代码将要在 keyUp 上执行的封装分配给页面中的所有 p > input 个元素 。我个人建议将我正在处理的项目封装在一个容器中，以防止针对您原本不打算使用的其他项目。

要访问相邻的span，您可以使用许多不同的方法，这里使用.next()，例如：

jQuery('p > input').keyup(function(e) { // handle keyup event jQuery(e.target).next().css('color', 'fuchsia'); });

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

is it possible to assign id name to a variable and use it in a function in javascript

javascript

iteration

variables

function

onkeyup