jQuery函数仅适用于第一行

时间:2019-11-02 09:07:06

标签: jquery asp.net-mvc-4 razor

我已经为锚标记声明了onclick函数。它的工作正常,但该函数仅对第一行有效。

html块

@foreach(var p in Model)
                       {

                        a++;

                    <tr class="rem1" >
                        <input type="hidden" id="mid" value="@p.mid">
                        <td class="invert">@a</td>
                        <td class="invert-image">
                            <a href="single_product.html">
                                <img src="@Url.Content(p.img)" alt=" " height="100"  class="img-responsive">
                            </a>
                       </td>

                 <td class="invert">
                            <div class="quantity">
                                <div class="quantity-select">
                                    <div class="entry value-minus" id="minus">&nbsp;</div>
                                    <div class="entry value" id="counter">1</div>


                //Div which the function written for
                                    <div class="entry value-plus active" id="plus" >&nbsp;</div>

                  //end
                        </div>
                            </div>
                        </td>
                        <td class="invert" onclick="as()">@p.mname</td>

                        <td class="invert" id="prize">@p.mprize</td><td style="display:none" id="pri">@p.mprize</td>
                        <td><a  id="close1" class="btn btn-primary" onclick="return onclickFunction(@p.mid)">Remove</a> </td>
                    </tr>
                     }

jQuery函数

$('#plus').on("click", function ()
        {

            var mid = $("#mid").val();
            var qua = parseInt(document.getElementById('counter').innerHTML);
            var a = parseInt(document.getElementById('pri').innerHTML);
            var upprize = qua * a;
            $("#prize").text(upprize);

            $.post("/Purchase/cartcountplus", { Mid:mid,Amt:upprize,qty:qua}, function (data) {
                alert("success");
                setTimeout(function () {// wait for 5 secs(2)
                    location.reload(); // then reload the page.(3)
                }, 1000);
            });

在这里,按<div id=plus>时奖金应增加。这些html块位于for循环内。在模型中显示值。 但它仅适用于第一行。

当我尝试通过使用这样的类名进行呼叫时 $(“ entry value-plus”)。click(function(){........});该功能甚至无法执行 Before clicking the + Div

After clicking + div thrice and here the second row value remains same

1 个答案:

答案 0 :(得分:0)

尝试此代码段。您需要找到最接近点击的中间,计数器,优先级等元素。

$('.entry.value-plus.active').click(function(){ 
    var row = $(this).closest("tr");

    var mid = $(row).children('#mid').val();
    var qua = parseInt($(row).children('#counter').text());
    var a =  parseInt($(row).children('#pri').text());
    var upprize = qua * a;
    $(row).children('#prize').text(upprize);

    $.post("/Purchase/cartcountplus", { Mid:mid,Amt:upprize,qty:qua}, function (data) {
        alert("success");
        setTimeout(function () {// wait for 5 secs(2)
            location.reload(); // then reload the page.(3)
        }, 1000);
    });
});