javascript - 更新购物车中的值

Question

我正在 MVC 4 中开发购物车应用程序，我需要在更改购物车数量时更新金额。

@foreach (var item in Model)
{
    <tr>
        <td>@item.ProductId</td>
        <td>@item.Product.ProductName</td>
        <td id="PriceBx">@item.Product.UnitPrice</td>

        <td id="QtyBx" oninput="calculate()">@Html.TextBox("QuantityBox", item.Quantity, new { style = "width:50px" })</td>
        <td id="result">@String.Format("{0:c}", Convert.ToDouble(item.Quantity) * Convert.ToDouble(item.Product.UnitPrice))</td>

    </tr>
}

在此，当 QuantityBox 中的值发生变化时，我需要更新 total。

我尝试使用 Javascript

<script type="text/javascript">
function calculate()
{

    var myBox1 = document.getElementById('QtyBx').value;
    var myBox2 = document.getElementById('PriceBx').value;
    var result = document.getElementById('result');
    var myResult = myBox1 * myBox2;
    result.innerHTML = myResult;
}

Answer 1

使用 foreach 生成多个元素，然后为其中的元素使用 id 属性从来都不是一个好主意，因为元素 id 必须是唯一的每个 HTML 页面。

尝试将产品 ID 附加到元素 ID:

@foreach (var item in Model)
{
    <tr>
        <td>@item.ProductId</td>
        <td>@item.Product.ProductName</td>
        <td id="PriceBx@(item.ProductId)">@item.Product.UnitPrice</td>

        <td id="QtyBx@(item.ProductId)" oninput="calculate(@(item.ProductId))">@Html.TextBox("QuantityBox", item.Quantity, new { style = "width:50px" })</td>
        <td id="result@(item.ProductId)">@String.Format("{0:c}", Convert.ToDouble(item.Quantity) * Convert.ToDouble(item.Product.UnitPrice))</td>

    </tr>
}

在你的 Javascript 中:

function calculate(itemId)
{
    var myBox1 = parseInt(document.getElementById('QtyBx' + itemId).value, 10);
    var myBox2 = parseFloat(document.getElementById('PriceBx' + itemId).value);
    var result = document.getElementById('result' + itemId);
    var myResult = myBox1 * myBox2;

    result.innerHTML = myResult;
}

(我冒昧地将您输入的值分别显式转换为 int 和 float)