javascript - 关于更改的 Jquery 文档 : can I use variable as selector?

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>

有没有办法在 document.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是一个计算字段，它不应该在 View (或者在模型中有 setter。使用 <div> 或类似的元素来显示它(然后使用 row.find('.price').text(finalPrice);设置它

另请注意 .on()除非您在首次生成 View 后动态添加这些元素，否则没有必要。