Question

我是javascript和jQuery的新手。在我看来，我有一个QuoteDetails列表，如下所示：

<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" })
    }

当用户更改金额或折扣时，我想重新计算价格。我试图用以下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>

有没有办法在index.on中使用带索引的变量作为jQuery选择器？任何帮助都感激不尽。

Answer 1

为您的元素提供类名称，例如

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

并将容器更改为<div class="row">

（同上discount，listprice和price）

然后你的脚本变成

$('.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);
})

有几点需要注意：

重复的id属性无效html - 删除所有new { @id = ".."代码。
由于您的班级名称，您现在可以设置宽度的样式 - 例如 .price { width: 95px; }
将值转换为Number并检查在进行计算之前使用isNaN有效值
由于Price是计算字段，因此不应在其中进行编辑查看（或在模型中使用setter。使用<div>或类似内容要显示它的元素（然后使用 row.find('.price').text(finalPrice);设置它

另请注意，除非您在首次生成视图后动态添加这些元素，否则无需.on()。

有关更改的Jquery文档：我可以使用变量作为选择器吗？

1 个答案: