JQuery 函数仅适用于第一行

Question

我已经为锚点声明了一个 onclick 函数 tag.And 它工作正常，但函数只对第一行有效。

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(函数(){ .......});该功能甚至没有执行

Answer 1

试试这个片段。您需要找到离您的点击最近的 mid、counter、pri 等元素。

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

JQuery 函数仅适用于第一行

JQuery function working only for first row

jquery

razor

asp.net-mvc-4