我如何在ASP.NET的razor视图中使用动态ID时使用jquery更改段落的内部html [英] How do i change the inner html of paragraph using jquery while using dynamic id in razor view of asp.net

问题描述

我试图更改剃刀视图的for循环中一个段落的内部html.随着我数量的变化，总价也应随之变化.这是我的剃刀视图，给出了动态ID.

I was trying to change the inner html of one paragraph which is in the for loop of razor view. As my quantity changes the Total price should change. Here is my razor view with dynamic id given.

<section id="cart_items">
    <div class="container">
        <div class="table-responsive cart_info">

            <table class="table table-condensed">
                <thead>
                    <tr class="cart_menu">
                        <td class="image">Item</td>
                        <td class="description"></td>
                        <td class="price">Price</td>
                        <td class="quantity">Quantity</td>
                        <td class="total">Total</td>
                        <td></td>
                    </tr>
                </thead>
                <tbody>
                    @foreach (var item in Model)
                    {
                        <tr id="@item.CartID">
                            <td class="cart_product">
                                <a href=""><img src="@Url.Content(item.Product.ProductImage)" style="width:40px;height:40px" alt="" /></a>
                            </td>
                            <td class="cart_description">
                                <h4><a href="">@item.Product.ProductName</a></h4>
                                <p>Web ID: 1089772</p>
                            </td>
                            <td class="cart_price">
                                <p class="cartprice" id="price">@item.Product.Price</p>
                                <input hidden id="abc" type="text" value="1" />
                            </td>
                            <td id="@item.Product.Price" class="cart_quantity">
                                <div class="cart_quantity_button">
                                    <a class="cart_quantity_up" id="AddButton"> + </a>
                                    <input class="cart_quantity_input" id="TextBox" type="text" name="quantity" value="1" autocomplete="off" size="2">
                                    <a class="cart_quantity_down" id="subbutton"> - </a>
                                </div>
                            </td>
                            <td class="cart_total">
                                <p id="totprice" class="cart_total_price">@item.Product.Price</p>
                            </td>
                            <td class="cart_delete">
                             @*   <a class="cart_quantity_delete" href="@Url.Action("RemoveCart", "Home",new {id=item.CartID})"><i class="fa fa-times"></i></a>*@
                                <p id="cart" hidden>@item.CartID</p>
                                <a id="Remove" class="cart_quantity_delete" href=""><i class="fa fa-times"></i></a>
                            </td>
                        </tr>
                    }
                </tbody>
            </table>
        </div>
    </div>
</section>
<!--/#cart_items-->
<section id="do_action">
</section>

我已经使用jquery在单击加号时动态更改数量，并在单击减号时给了ID并对其进行了清理.

I have used jquery to change the quantity dynamically when click on plus symbol and decraese when click on minus symbol having given some id to it.

这是我的jQuery

This is my jquery

<script>
    $(document).ready(function() {
        $('.cart_quantity_up').click(function(){
            var quantityBox = $("#TextBox", $(this).parent());
            var currentValue = quantityBox.val();
            var w = parseInt($(this).closest('td').prop('id'));
            quantityBox.val(parseInt(currentValue) + 1);
            var oldprice = $("#price").html();
            var totprice = parseInt(w) * quantityBox.val();
            $('#' + w).find("#totprice").text(totprice);
        });

        $('.cart_quantity_down').click(function() {
            var quantityBox = $("#TextBox", $(this).parent());
            var currentValue = quantityBox.val();
            quantityBox.val(parseInt(currentValue) - 1);
        });
    });
</script>

我要在增加数量的地方更改商品总价.这是我尝试过的但无法更改适当的值.那么我该怎么做.请帮助我.

I want to make the changes in total price of the item where I incresed the quantity. Here is what i tried but not able to change the proper value. So how can i do it. please help me.

推荐答案

在您的代码中，您尝试访问$("#price").html()来扫描整个文档，并且因为您已编写循环，所以它们是具有相同id的多个元素` #price"，因此无法决定选择哪一个.

您编写的代码与要实现的代码相比更加复杂.

请尝试以下代码代替您的代码.

In your code you are trying to access the $("#price").html() which scans the whole document and because you have wrote the loop their are multiple element with the same id `#price' so it is not able to decide which one to pick.

The code which you have wrote it is more complicated to what you are trying to achieve.

Try the following code in place of your.

<script>
  $(document).ready(function() {
        $('.cart_quantity_up').click(function(){
            var quantityBox = $(this).siblings("#TextBox");
            var quantity= parseInt(quantityBox.val()) + 1;
            quantityBox.val(quantity);

            var price = parseInt($(this).parent().siblings(".cart_price").children("#price").html());
            var totalPrice = quantity * price;
            $(this).parent().siblings(".cart_total").children("#totprice").html(totalPrice);
        });

        $('.cart_quantity_down').click(function() {
            var quantityBox = $(this).siblings("#TextBox");
            var quantity= parseInt(quantityBox.val()) - 1;
            quantityBox.val(quantity);

            var price = parseInt($(this).parent().siblings(".cart_price").children("#price").html());
            var totalPrice = quantity * price;
            $(this).parent().siblings(".cart_total").children("#totprice").html(totalPrice);
        });
    });
</script>

这篇关于我如何在ASP.NET的razor视图中使用动态ID时使用jquery更改段落的内部html的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！