Plus和減號按鈕更新

-1

我遇到問題的表格有一個帶有加號和減號按鈕的文本輸入字段兩側的列。該列名爲QUANTITY，加號按鈕可以增加到10;如果在10的值之後點擊該按鈕，則點擊被設置爲空。這很好，工作。關於減號按鈕;如果該值降到1以下，整行將被刪除。這也在工作;問題是當我點擊行號x中的任何一個按鈕時，所有其他行都會受到增加或減少的影響。我需要代碼才能更新活動的行。這裏是HTML和JavaScript。Plus和減號按鈕更新

<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. 
----------------------------------------------------------------------------------*/ 
});

來源

2014-05-17 busada-ela

嗨SHanley。感謝您的幫助，使用關鍵字'這'來到兄弟選擇器 –

由於您選擇您使用的設置值是$('.figure')，你選擇與該類而不是隻是一個行中的所有元素。您可以通過多種方式解決問題 - 您可以切換爲給每個人一個唯一的ID並使用這些ID進行選擇，或者通過簡單的方法解決此問題，可以縮小要查找所選項目的位置 - 我建議$(this).siblings('.figure')，這樣你只能從被點擊的按鈕的同級中選擇，而不是從DOM中的所有元素中選擇。嗨SHanley。

來源

2014-05-17 14:16:53

Plus和減號按鈕更新

回答

相關問題