jQuery: многократно заменять текст определенного диапазона

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> 

Да, петля в петлю, так как число элементов может изменяться. Далее, 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, легко с минимальным кодированием