Функция JQuery работает только для первого ряда

Question

Я объявил функцию 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. Для отображения значений в модели. но это работает только для первой строки.

и , когда я попытался вызвать с помощью имени класса, как это $ ("входное значение плюс"). click (function () {....... .});функция даже не выполняется

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);
    });
});