jQuery文档更改：我可以使用变量作为选择器吗？

Question

I am very new to javascript and jQuery. In my view, I have a List of QuoteDetails, as follows:

<div class="col-md-10" id="QuoteDetails">
    @for (int i = 0; i < Model.QuoteDetail.Count; i++)
    {
        <div id="row">
            @Html.HiddenFor(model => model.QuoteDetail[i].QuoteId, new { htmlAttributes = new { @class = "form-control" } })
            @Html.HiddenFor(model => model.QuoteDetail[i].QuoteDetailId, new { htmlAttributes = new { @class = "form-control" } })
            @Html.EditorFor(model => model.QuoteDetail[i].ProductId, new { htmlAttributes = new { @id = "PId", @class = "form-control", style = "width: 75px" } })
            @Html.EditorFor(model => model.QuoteDetail[i].ProductName, new { htmlAttributes = new { @id = "Product", @class = "form-control", style = "width: 300px" } })
            @Html.EditorFor(model => model.QuoteDetail[i].Amount, new { htmlAttributes = new { @class = "form-control", style = "width: 95px" } })
            @Html.EditorFor(model => model.QuoteDetail[i].ListPrice, new { htmlAttributes = new { @id = "Lprice", @class = "form-control", style = "width: 95px" } })
            @Html.EditorFor(model => model.QuoteDetail[i].Discount, new { htmlAttributes = new { @class = "form-control", style = "width: 100px" } })
            @Html.EditorFor(model => model.QuoteDetail[i].Price, new { htmlAttributes = new { @id = "Pr", @class = "form-control", style = "width: 100px" } })
            @Html.ValidationMessageFor(model => model.QuoteDetail, "", new { @class = "text-danger" })
    }

When either the Amount or Discount is changed by the user, I want to recalculate the Price. I am trying to solve it with the following javascript/jQuery:

<script type="text/javascript">
    $(document).ready(function () {
        var quoteDetails = $('[name*="QuoteDetailId"]');
        var amounts = $('[id*="Amount"]')
        var discounts = $('[id*="Discount"]')
        var prices = $('[id*="Price"]')
        var listPrices = $('[id*="LPrice"]')
          for (var i = 0; i < quoteDetails.length; i++) {
            $(document).on("change", discounts[i], amounts[i], function calculate() {  
                var finalPrice = $(amounts[i]).val() * ($(listPrices[i]).val() * ((100 - $(discount[i]).val()) / 100)) 
                $(prices[i]).val(finalPrice);
            });
        };
    });
</script>

Is there a way to use variables with indices as jQuery selectors in the document.on change? Any help will be much appreciated.

Answer 1

Give your elements class names, eg

@Html.EditorFor(m=> m.QuoteDetail[i].Amount, new { htmlAttributes = new { @class = "form-control amount"} })

and change the container to <div class="row">

(ditto for discount , listprice and price )

Then your script becomes

$('.amount, .discount').change(function() {
    // Get container
    var row = $(this).closest('.row');
    // Get values
    var amount = Number(row.find('.amount').val());
    var listprice = Number(row.find('.listprice').val());
    var discount = Number(row.find('.discount').val()); 
    // Validate
    if (isNaN(amount) || isNaN(listprice) || isNaN(discount))
    {
        return; // may want to display an error message?
    }
    // Calculate
    var finalPrice = amount * listprice * ((100 - discount) / 100)
    // Update
    row.find('.price').val(finalPrice);
})

A few things to note:

• Duplicate id attributes are invalid html - remove all your new { @id = ".." code.
• Because of your class names, you can now style the widths - eg .price { width: 95px; } .price { width: 95px; }
• Convert the values to a Number and check that the value is valid using isNaN before doing the calculation
• Since Price is a calculated field, it should not be editable in the view (or have a setter in the model. Use a <div> or similar element to display it (and then use row.find('.price').text(finalPrice); to set it

Note also that .on() is not necessary unless your dynamically adding those elements after the view has been first generated.