javascript - 添加输入类型值

Question

我正在尝试添加 li 标签内的特定输入 ID 值。但它只得到第一个数字。我不知道如何让第二个和第三个工作。我对 javascript 很陌生。代码如下所示。

HTML

<li id="Pallet1" class="inactive">
<span class="itemNumber">1</span>
<input type="text" name="weight" placeholder="Pallet Weight (lbs)" id="QT" class='weight'/>
</li>

<li id="Pallet1" class="inactive">
<span class="itemNumber">2</span>
<input type="text" name="weight" placeholder="Pallet Weight (lbs)" id="f"/>
</li>

<li id="Pallet1" class="inactive">
<span class="itemNumber">3</span>
<input type="text" name="weight" placeholder="Pallet Weight (lbs)" id="f2"/>
</li>

<span id="total"></span>

JavaScript

$(".weight").keyup(function(){    

var totalweight = $(".weight").val();
var totalweight2 = $("#f").val();
var totalweight3 = $("#f2").val();

if(totalweight2 == "" && totalweight3 == ""){
    var total = totalweight;
}
if(totalweight3 == ""){
    var total = Number(totalweight)+Number(totalweight2);
}
//this must add up
if(totalweight != "" && totalweight2 != "" && totalweight3 != ""){
    var total = Number(totalweight)+Number(totalweight2)+Number(totalweight3);
}

$("#total").text(total);
if(total == ""){
   $("#total").text("0");
}
});

Answer 1

这是 fiddle DEMO .如果用户按下任何字母，您无需担心。如果输入只是一个数字，此脚本将进行计算。

您可以像下面这样使用您的 html 标记，

<li id="Pallet1" class="inactive">
<span class="itemNumber">1</span>

    <input type="text" name="weight" placeholder="Pallet Weight (lbs)" id="QT" class='weight' />
</li>
<li id="Pallet1" class="inactive">
<span class="itemNumber">2</span>

    <input type="text" name="weight" placeholder="Pallet Weight (lbs)" id="f" class='weight' />
</li>
<li id="Pallet1" class="inactive">
<span class="itemNumber">3</span>

    <input type="text" name="weight" placeholder="Pallet Weight (lbs)" id="f2" class='weight' />
</li>
<span id="total"></span>

您可以像这样简单地使用您的 javascript 代码，

$(".weight").keyup(function () {
    var sum = 0;
    $('.weight').each(function () {
        if (!isNaN(this.value) && this.value.length != 0) {
            sum += +this.value;
        }
    });
    $('#total').text(sum);
});

查看此 FIDDLE DEMO