Question

我有一张产品表。我每排都有一个按钮。当我点击按钮时，我想通过为此行添加1来更改输入文本框的值。但它的工作只是第一排。我的HTML和jQuery代码如下。请帮帮我。

<div class="row">
    <p class="column">A Product Name</p>
    <p class="column"><input type="text" size=1 id="quantity" value="5"/> <button onclick="$.updatequantity();">+</button></p>
    <p class="column" id="price">55 TL</p>
    <p class="column" id="total">275 TL</p>
</div>

<div class="row">
    <p class="column">Another Product Name</p>
    <p class="column"><input type="text" size=1 id="quantity" value="5"/> <button onclick="$.updatequantity();">+</button></p>
    <p class="column" id="price">25 TL</p>
    <p class="column" id="total">125 TL</p>
</div>



<script>
$.updatequantity = function(){
        var i=+$("#quantity").val();
        i +=1;
        $("#quantity").val(i);
        var price = $("#price").text();
        var result = price.replace(' TL','');
        var total = result * i;
        $("#total").html(total).show();
  }
</script>

Answer 1

如果你使用onclick监听器会更好。这是一个实例

＆＃13;

$(".incre").on("click", function() {
    var quantity = $(this).parent().find("#quantity");
    
    var i=+ quantity.val();
    i +=1;
    quantity.val(i);
    var price = $(this).parent().parent().find("#price").text();
    var result = price.replace(' TL','');
    var total = result * i;
    $(this).parent().parent().find("#total").html(total).show();
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="row">
    <p class="column">A Product Name</p>
    <p class="column"><input type="text" size=1 id="quantity" value="5"/> <button class="incre">+</button></p>
    <p class="column" id="price">55 TL</p>
    <p class="column" id="total">275 TL</p>
</div>

<div class="row">
    <p class="column">Another Product Name</p>
    <p class="column"><input type="text" size=1 id="quantity" value="5"/> <button class="incre">+</button></p>
    <p class="column" id="price">25 TL</p>
    <p class="column" id="total">125 TL</p>
</div>

＆＃13;

Answer 2

如果你给每一行一个唯一的id并将该id（当然是一个字符串）传递给onclick的调用，那么它应该按照你的预期工作。新的更新功能如下所示：

$.updatequantity = function(row_selector){
    var i= +$(row_selector).find('input').val();
    i +=1;
    $(row_selector).find('input').val(i);
    var price = $(row_selector).find('#price').text();
    var result = price.replace(' TL','');
    var total = result * i;
    $(row_selector).find('#total').html(total).show();
}

它也应该与＆＃39;这个＆＃39;参考文献，但我对这种方法有点生气。

Answer 3

您可以在此处查看我的答案Fiddle

<div class="row">
    <p class="column">A Product Name</p>
    <p class="column"><input type="text" size=1 id="quantity" value="5"/> <button>+</button></p>
    <p class="column price">55 TL</p>
    <p class="column total">275 TL</p>
</div>

<div class="row">
    <p class="column">Another Product Name</p>
    <p class="column"><input type="text" size=1 id="quantity" value="5"/> <button>+</button></p>
    <p class="column price">25 TL</p>
    <p class="column total">125 TL</p>
</div>

$("button").click(function(event){
        var i=+$(event.target).prev().val()
        i +=1;
        $(event.target).prev().val(i);
        var price = $(event.target).parent().next().text();
        var result = price.replace(' TL','');
        var total = result * i;
        $(event.target).parent().next().next().html(total).show();
  });

jQuery更改Row的值

3 个答案: