Question

我遇到一个表格有问题，该表格的文本输入字段两侧都有一个加号和减号按钮。该列名为QUANTITY，加号按钮可以增加到10;如果在值10之后单击按钮，则单击将设置为null。那很好，很有效;关于减号按钮;如果值低于1，则删除整行。这也有效;问题是当我单击行号x中的任一按钮时，所有其他行都会受到影响的增加或减少。我需要代码只更新活动的行。这是HTML和JavaScript。

<table id="shopping-basket">
<colgroup span="5" class="columns">
</colgroup>
<!-- Shopping Basket contents -->
    <thead>
  <tr>
    <th>Product Title</th>
    <th>Size</th>
    <th>Colour</th>
    <th>Quantity</th>
    <th>Price</th>
   </tr>
   </thead>
 <!-- JSON data -->
  <tbody id="content">

 </tbody>
 </table>
<script type="text/javascript" src="javascript/jquery.js"></script>
<script src="javascript/test.js"></script>

javaScript首先是2个文件中的JSON。

[
            {
                "title": "Product 1",
                "size": "Small",
                "colour": "Black",
                "quantity": "1",
                "price": "3.99"
            },
            {
                "title": "Product 2",
                "size": "Medium",
                "colour": "Red",
                "quantity": "1",
                "price": "13.99"
            },
            {
                "title": "Product 3",
                "size": "Small",
                "colour": "Blue",
                "quantity": "2",
                "price": "7.99"
            },
            {
                "title": "Product 4",
                "size": "Medium",
                "colour": "Black",
                "quantity": "1",
                "price": "9.00"
            },
            {
                "title": "Product 5",
                "size": "Large",
                "colour": "Orange",
                "quantity": "1",
                "price": "4.50"
            }

        ]

最后将JavaScript文件添加到事件中。

$(function() { /*--- get JSON ----------------------*/
  $.getJSON('javascript/testobject.json', function(data) {
    var table = '<table>';
    $.each(data, function(index, item) {
      table += '<tr class="editable"><td>' + item.title + '</td><td>' + item.size + '</td><td>' + item.colour + '</td><td><input type="button" class="minus" value="-" /><input type="text" class="figure" value="' + item.quantity + ' "/><input type="button" class="plus" value="+" /></td><td>' + item.price + '</td></tr>';
    });
    table += '</table>';
    $("#content").html(table);
  }); /*------ plus fn ----------------------*/
  $(document).on('click', "input[type='button'].minus", function() {
    var selected_row = ($(this).parent().parent());
    selected_row.addClass('selected');
    var d_value = $(".figure").val();
    d_value--;
    if (d_value === 0) {
      selected_row.hide();
      return null;
    }
    $(".figure").val(d_value);
  }); /*------ minus fn ----------------------*/
  $(document).on('click', "input[type='button'].plus", function() {
    var i_value = $(".figure").val();
    i_value++;
    if (i_value === 11) { /*----alert("INC HELLO");----*/
      return null;
    }
    $(".figure").val(i_value);
  });
/*--------------------------------------------------------------------
                PLEASE NOTE I AM HAVING A PROBLEM WITH THE COLLECTION '.FIGURE' CLASS
                INSTEAD OF IMCREMENTING 1 AT A TIME IT IS INCREMENTING & DECREMENTING
                ALL THE VALUES AT THE SAME TIME.
----------------------------------------------------------------------------------*/
});

Answer 1

由于您用于设置值的选择器为$('.figure')，因此您选择的是具有该类的所有元素，而不仅仅是行中的元素。您可以通过多种方式解决问题 - 您可以切换为为每个人提供一个唯一ID并使用这些ID进行选择，或者解决这个问题的简单方法是缩小您选择项目的位置 - 我建议$(this).siblings('.figure')，这样你只能从点击按钮的兄弟中选择，而不是从DOM中的所有元素中选择。

加号和减号按钮更新

1 个答案: