2

ユーザーが何かのコストを構築できるように、動的なグリッド スタイルの計算機を構築しようとしています。すべてのコンポーネントの詳細を取得するために必要な数の行を追加できます。私が今しなければならないことは、jQuery も動的にすることです。これにより、追加された行ごとTotalに計算されます。Line Total現時点でコードを取得しているため、電卓の最初の行でのみ機能します

電卓

$(document).ready(function () {
    $('.used-amount input[type="text"]')
           .on("propertychange, change, keyup, paste, input", function () {
        var usedtotal = $(this).val() * $('.used-cost input[type="text"]').val();
        $('.used-total').text(usedtotal);
    });

    $('.used-cost input[type="text"]')
           .on("propertychange, change, keyup, paste, input", function () {
        var usedtotal = $(this).val() * $('.used-amount input[type="text"]').val();
        $('.used-total').text(usedtotal);
    });

    $('.wastage-cost input[type="text"]')
           .on("propertychange, change, keyup, paste, input", function () {
        var usedtotal = $(this).val() * $('.wastage-amount input[type="text"]').val();
        $('.wastage-total').text(usedtotal);
    });

    $('.wastage-cost input[type="text"]')
           .on("propertychange, change, keyup, paste, input", function () {
        var usedtotal = $(this).val() * $('.wastage-amount input[type="text"]').val();
        $('.wastage-total').text(usedtotal);
    });

    $('.calculator input[type="text"]')
           .on("propertychange, change, keyup, paste, input", function () {
        var linetotal = 
            ($('.used-amount input[type="text"]').val()
          *  $('.used-cost input[type="text"]').val())
          + ($('.wastage-amount input[type="text"]').val()
          *  $('.wastage-cost input[type="text"]').val())
        $('.line-total').text(linetotal);
    });
});

各行はカミソリ部分ビューです。

@model TheWorkshop.Web.Models.Edit.CalculatorViewModel

<tr class="calculator-detail">
  <td class="component-type">@Html.EnumDropDownListify("ComponentType", @Model.ComponentType)</td>
  <td class="component">@Html.DropDownListFor(model => model.SelectedComponentId, Model.ComponentSelectList, "Select...")</td>
  <td class="used-amount">@Html.EditorFor(model => model.UsedAmount)</td>
  <td class="used-cost">@Html.EditorFor(model => model.UsedCost)</td>
  <td class="used-total"></td>
  <td class="wastage-amount">@Html.EditorFor(model => model.WastageAmount)</td>
  <td class="wastage-cost">@Html.EditorFor(model => model.WastageCost)</td>
  <td class="wastage-total"></td>
  <td class="line-total"></td>
</tr>

ボタンがクリックされたときに追加しています

$(document).ready(function ($) {
    $("button").click(function () {
        $.get('@Url.Action("AddCalculatorRow", "Workshop", 
                new { id = Model.Id } )', function (data) {
            $(data).hide().appendTo('.calculator tbody').fadeIn(2000);
        });
    });
});

そしてコントローラー

public ActionResult AddCalculatorRow()
{
    var components = Session.QueryOver<Component>()
                            .OrderBy(c => c.Name).Asc.List<Component>();
    var modelView = new CalculatorViewModel() { Components = components }; 

    return PartialView("_CalculatorRow", modelView);
}

編集
使用済みとコストの合計と、廃棄物とコストの合計が機能しています。しかし、LineTotal が機能していないようで、@JeffB のコメントに従うと、次のようになります。

$(document)
  .on("propertychange, change, keyup, paste, input",
      '.calculator input[type="text"]', function () {
         var linetotal = 
           ($(this).parent().siblings('.used-amount').find('input').val() *    
            $(this).parent().siblings('.used-cost').find('input').val())
         + ($(this).parent().siblings('.wastage-amount').find('input').val() * 
            $(this).parent().siblings('.wastage-cost').find('input').val());
         $(this).parent().siblings('.line-total').text(usedtotal);
      });

編集 2
コピーと貼り付けについて教えてくれます...
上記のコードの間違いは、4 つのセルすべての合計を変数に割り当てたことですが、セルをlinetotal更新するときに、何もありません。それを linetotal 変数に変更すると修正され、すべてのセルが正しく計算されるようになりました。line-totalusedtotal

4

1 に答える 1

5

呼び出し後に追加された UI 要素にバインドしない、委任されていないバージョンの on() を使用しています。変更してみる

$('.used-amount input[type="text"]')
       .on("propertychange, change, keyup, paste, input", function () {
    var usedtotal = $(this).val() * $('.used-cost input[type="text"]').val();
    $('.used-total').text(usedtotal);
});

に

$(document)
       .on("propertychange, change, keyup, paste, input", 
           '.used-amount input[type="text"]', function () {
    var usedtotal = $(this).val() * $('.used-cost input[type="text"]').val();
    $('.used-total').text(usedtotal);
});

詳細については、「直接および委任されたイベント」セクションを参照してください。

http://api.jquery.com/on/

于 2013-04-02T21:28:34.073 に答える