Question

我正在尝试构建一个视图，其中用户有许多输入框，每个输入框都包含一个数值。

我想显示特定地区特定div中每个输入的总和。所以这就是我到目前为止所做的。

首先，有关观点的一部分：

<div id="@Model[i].mCardID">
    @for (int j = 0; j < Model[i].mListBackstore.Count; j++)
    {
        switch (Model[i].mListBackstore[j].mBackstoreInventoryItem.InventoryItem.mItemState)
        {
            case "Near Mint":
                <div>
                    Near Mint: @Html.DisplayFor(_item => _item[i].mListBackstore[j].mBackstoreInventoryItem.Quantity)
                    @Html.TextBoxFor(_item => _item[i].mQuantityToAdd, new { @class = "textNum positive-integer cardPackValue card-" + Model[i].mCardID + "", @id="dataNum-" + Model[i].mListBackstore[j].mBackstoreInventoryItem.BackstoreInventoryID, @card=Model[i].mCardID } )
                </div>
                break;
            case "Almost Near Mint":
                <div>
                    Almost Near Mint: @Html.DisplayFor(_item => _item[i].mListBackstore[j].mBackstoreInventoryItem.Quantity)
                    @Html.TextBoxFor(_item => _item[i].mQuantityToAdd, new { @class = "textNum positive-integer cardPackValue", @id="dataNum-" + Model[i].mListBackstore[j].mBackstoreInventoryItem.BackstoreInventoryID } )
                </div>
                break;
            case "Slightly Played":
                <div>
                    Slightly Played: @Html.DisplayFor(_item => _item[i].mListBackstore[j].mBackstoreInventoryItem.Quantity)
                    @Html.TextBoxFor(_item => _item[i].mQuantityToAdd, new { @class = "textNum positive-integer cardPackValue", @id="dataNum-" + Model[i].mListBackstore[j].mBackstoreInventoryItem.BackstoreInventoryID } )
                </div>
                break;
            case "Played":
                <div>
                    Played: @Html.DisplayFor(_item => _item[i].mListBackstore[j].mBackstoreInventoryItem.Quantity)
                    @Html.TextBoxFor(_item => _item[i].mQuantityToAdd, new { @class = "textNum positive-integer cardPackValue", @id="dataNum-" + Model[i].mListBackstore[j].mBackstoreInventoryItem.BackstoreInventoryID } )
                </div>
                break;
            case "Heavily Played":
                <div>
                    Heavily Played: @Html.DisplayFor(_item => _item[i].mListBackstore[j].mBackstoreInventoryItem.Quantity)
                    @Html.TextBoxFor(_item => _item[i].mQuantityToAdd, new { @class = "textNum positive-integer cardPackValue", @id="dataNum-" + Model[i].mListBackstore[j].mBackstoreInventoryItem.BackstoreInventoryID } )
                </div>
                break;
            case "Damaged":
                <div>
                    Damaged: @Html.DisplayFor(_item => _item[i].mListBackstore[j].mBackstoreInventoryItem.Quantity)
                    @Html.TextBoxFor(_item => _item[i].mQuantityToAdd, new { @class = "textNum positive-integer cardPackValue", @id="dataNum-" + Model[i].mListBackstore[j].mBackstoreInventoryItem.BackstoreInventoryID } )
                </div>
                break;
        }
    }
</div>

<p style="font-size: 1.2em">Total: <span class="totals totalCards-@Model[i].mCardID">0</span></p>

Yup，循环中的循环，因为项目数可能会有所不同。接下来，javascript小提琴：

$('.cardPackValue').on('input', function() {
    var total = 0;

    var id = $(this).attr("id");

    var classNames = $(this).attr("class").split(" ");

    var classToParse = classNames[classNames.length - 1];

    if (classToParse != undefined) {
        var spanId = classToParse.split("-")[1];

        $("." + classToParse).each(function (i, n) {
            var valueToAdd = parseInt($(n).val());

            if (!isNaN(valueToAdd)) {
                if(valueToAdd != 0){
                    //alert(valueToAdd);
                    total += valueToAdd;
                }
            }
        });
        if (!isNaN(total)) {
            alert(total);
            //alert(spanId);
            $('span.totalCards-' + spanId).text(total);
        }
    }
});

现在它正在运行，但只有一次。因此，如果我有三个盒子，或者如果我多次更改相同的输入，则不再更改总数。任何人都可以帮助我实现我想要做的事情吗？非常感谢！

Answer 1

我认为你的事件绑定是错误的。而不是：

$('.cardPackValue').on('input', function() {

这样做：

$('.cardPackValue input').on('change', function() {

干杯

Answer 2

你可以发布小提琴吗？我的猜测是，由于服务器模板和jQuery实现之间的逻辑分歧，我们看到了一个问题。通常最好将数据发送到客户端，然后让它生成关联的HTML。

Answer 3

使用来自knockout.js的计算的observable，使用最少的编码轻松

jQuery：多次替换特定的跨度文本

3 个答案: