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

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中的函数中使用它

2 个答案: