如何使用JQUERY增加或减少数量

时间:2018-03-28 05:43:59

标签: javascript jquery html

这里我有一张桌子,在那张桌子上我有一列@Override public void performSetup() { MockitoAnnotations.initMocks(this); registerMockSingleton(ReferenceConceptHelper.class,mockReferenceConceptHelper); registerMockSingleton(ConceptClientFacade.class,mockConceptClientExternalFacade); fixValueConceptIntegration = new FixValueConceptIntegration(); } @Override protected void performTearDown() throws Exception { fixValueConceptIntegration = null; } 增量作为减量,之后我想要取这个值,我不知道怎么做,我尝试了很多时间但是它没有发生,如果有人意味着请更新你的代码。我发布了我试过的,我不知道quantityincrement部分的这一部分。



decrement

function addToCart(product_id, obj) {
  var qty = $(obj).closest('tr').find('#txtAcrescimo').val();
  console.log(qty);
}




  

我试过这样的

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-xs">
  <tbody>
    <tr>
      <th>Product Name</th>
      <th class="text-right center">Quantity</th>
    </tr>
    <tr class="item-row">
      <td>
        <p>Sandisk</p>
      </td>
      <td class="text-right center" title="Quantity">
        <center>
          <div class="input-group quantity-div">
            <button type="button" class="pls altera"> - </button>&nbsp;
            <input type="text" name="quantity" value="1" class="left-mob" id="txtAcrescimo" style="width: 60px;height: 23px;padding-left: 20px;">&nbsp;<button type="button" class="pls altera acrescimo" onclick="addToCart('12',this)"> + </button>
          </div>
        </center>
      </td>
    </tr>
    <tr class="item-row">
      <td>
        <p>TRANBO </p>
      </td>
      <td class="text-right center" title="Quantity">
        <center>
          <div class="input-group quantity-div">
            <button type="button" class="pls altera"> - </button>&nbsp;
            <input type="text" name="quantity" value="4" class="left-mob" id="txtAcrescimo" style="width: 60px;height: 23px;padding-left: 20px;">&nbsp;<button type="button" class="pls altera acrescimo" onclick="addToCart('16',this)"> + </button>
          </div>
        </center>
      </td>
    </tr>
  </tbody>
</table>

3 个答案:

答案 0 :(得分:1)

我更改了一个减号按钮,请尝试一下。

$(document).ready(function() {
   $('.pls.altera').click(function() {
       var curr_quantity = $(this).prev().val();
       curr_quantity = parseInt(curr_quantity)+1;
       $(this).prev().val(curr_quantity);
       alert('Product Name : '+$(this).parent().parent().parent().prev().text());
   });
   $('.pls.minus').click(function() {
       var curr_quantity = $(this).next().val();
       if(curr_quantity != 0) {
           curr_quantity = parseInt(curr_quantity)-1;
           $(this).next().val(curr_quantity);
           alert('Product Name : '+$(this).parent().parent().parent().prev().text());
       }
   });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-xs">
  <tbody>
    <tr>
      <th>Product Name</th>
      <th class="text-right center">Quantity</th>
    </tr>
    <tr class="item-row">
      <td>
        <p>Sandisk</p>
      </td>
      <td class="text-right center" title="Quantity">
        <center>
          <div class="input-group quantity-div">
            <button type="button" class="pls minus"> - </button>&nbsp;
            <input type="text" name="quantity" value="1" class="left-mob" id="txtAcrescimo" style="width: 60px;height: 23px;padding-left: 20px;">&nbsp;<button type="button" class="pls altera"> + </button>
          </div>
        </center>
      </td>
    </tr>
    <tr class="item-row">
      <td>
        <p>TRANBO </p>
      </td>
      <td class="text-right center" title="Quantity">
        <center>
          <div class="input-group quantity-div">
            <button type="button" class="pls minus"> - </button>&nbsp;
            <input type="text" name="quantity" value="4" class="left-mob" id="txtAcrescimo" style="width: 60px;height: 23px;padding-left: 20px;">&nbsp;<button type="button" class="pls altera"> + </button>
          </div>
        </center>
      </td>
    </tr>
  </tbody>
</table>

答案 1 :(得分:1)

$(document).on('click', '.number-spinner button', function() {
  var btn = $(this),
    oldValue = btn.closest('.number-spinner').find('input').val().trim(),
    newVal = 0;
  newVal = (btn.attr('data-dir') === 'up') ? parseInt(oldValue) + 1 : (oldValue > 1) ? parseInt(oldValue) - 1 : 0;
  btn.closest('.number-spinner').find('input').val(newVal);
});
<link type="text/css" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<div class="col-sm-12 col-xs-12 spinner-block">
  <div class="number-spinner">
    <div class="input-group number-spinner">
      <span class="input-group-btn">
        <button type="button" class="btn btn-default btn-number btncartsniper" data-type="minus" data-dir="dwn"><span class="fa fa-minus fa-sm"></span></button>
      </span>
      <input name="quantity[]" class="form-control input-number Snippper_qty" value="0" type="number">
      <span class="input-group-btn">
        <button type="button" class="btn btn-default btn-number btncartsniper" data-type="plus"  data-dir="up"><span class="fa fa-plus fa-sm"></span></button>
      </span>
    </div>
  </div>

答案 2 :(得分:0)

 <input type="number" id="num">

<script>
function abc() {
    document.getElementById("num").stepUp();



}
</script>