输入类型=“数字”事件加/减键

时间:2019-03-13 07:13:42

标签: jquery

我尝试为输入类型编号创建一个事件。它在购物篮页面上,如果用户单击“向上”按钮,则还必须更改价格和向下按钮。如果它只是购物篮中的一项,它会很好地工作。但是,如果它等于或大于2,则说明它不是必须要做的。

$("input[type=number]").bind('keyup input', function() {
  var wrapper = $(this).closest(".quantety");
  var quantety = wrapper.find('.inputQuantity').val();
  alert("quantety = " + quantety + " quantetyNumber = " + quantatyNumber);
  if (quantety > quantatyNumber) {
    quantatyNumber = quantatyNumber + 1;
    var summaplus = wrapper.find('.inputQuantity').attr('id');
    var totalPlus = wrapper.find('.penger').text();
    totalPlus = parseInt(totalPlus);
    summaplus = parseInt(summaplus);
    var total = totalPlus + summaplus;
    $('.penger').text(total);

    var summaUp = $('.summa').text();
    summaUp = parseInt(summaUp);
    var Plus = summaUp + summaplus;
    $('.Geld').text(Plus);
    $('.summa').text(Plus);
  } else if (quantety < quantatyNumber) {
    alert('Test-2');
    quantatyNumber = quantatyNumber - 1;
    //var wrapper = $(this).closest(".basDiv");
    var summaminus = wrapper.find('.inputQuantity').attr('id');
    var totalMinus = wrapper.find('.penger').text();
    totalMinus = parseInt(totalMinus);
    summaminus = parseInt(summaminus);
    var Minus = totalMinus - summaminus;
    $('.penger').text(Minus);
    //
    var summaDown = $('.summa').text();
    summaDown = parseInt(summaDown);
    var total = summaDown - summaminus;
    $('.Geld').text(total);
    $('.summa').text(total);
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='basketmain'><br>
  <h2>Varorkorg</h2>
  <div class='basDiv'>
    <img src='img/4.jpg' class='basIMG' alt='Taklampa Arma' />
    <div class='ProductName'>
      <p class='Pname'>Taklampa Arma</p>
    </div>
    <div class='itemLink'><a href='#' class='ProductLink'>Taklampa Arma</a>
    </div>
    <div class='quantety'>
      <input type='number' class='inputQuantity' id='254' value='1' min='1' />
    </div>
    <div class='ProductPrice'>Pris: <span class='penger'>254</span> kr
    </div>
    <div class='removeItem'><img src='img/remove.png' class='removeItemImg' alt='Radera'>
    </div>
  </div>
  <div class='basDiv'>
    <img src='img/5.jpg' class='basIMG' alt='Taklampa Igor'>
    <div class='ProductName'>
      <P class='Pname'>Taklampa Igor</p>
    </div>
    <div class='itemLink'><a href='#' class='ProductLink'>Taklampa Igor</a>
    </div>
    <div class='quantety'>
      <input type='number' class='inputQuantity' id='123' value='1' min='1' />
    </div>
    <div class='ProductPrice'>Pris: <span class='penger'>123</span> kr
    </div>
    <div class='removeItem'><img src='img/remove.png' class='removeItemImg' alt='Radera'>
    </div>
  </div>
  <div class="DivSumma">
    <div class="PayButton">
      <form action="" method="POST">
        <input type="submit" value="Betala" id="PayItem" />
      </form>
    </div>
    <div class="TotalSumma">Att Betala <span class="summa">377</span> kr
    </div>
  </div>
</div>

变量quantumyNumber是全局的,以查看点击输入的值是否更大。是否可以通过简单的方法解决我的问题?

我的标头中有一个类为'.Geld'的div块。

2 个答案:

答案 0 :(得分:0)

我不会再提出一个询问。现在,我将输入类型编号更改为输入类型文本,并添加了两个图像,并为单击功能上的每个图像创建了两个功能。看代码。

$('.qantetyImgPlus').on('click', function(){
    var wrapper = $(this).closest(".basDiv");
        quantety = wrapper.find('.inputQuantity').val();
        quantety = parseInt(quantety);
        if(quantety >= 1){
            var quantatyNumber = quantety + 1;
            $('.inputQuantity').val(quantatyNumber);
        alert("quantety = " + quantety + " quantetyNumber = "+ quantatyNumber);
               var summaplus = wrapper.find('.inputQuantity').attr('id');
               var totalPlus = wrapper.find('.pengerpenger').text();
               alert('pengerpenger = '+ totalPlus);
               totalPlus = parseInt(totalPlus);
               summaplus = parseInt(summaplus);
               alert(totalPlus + " " + summaplus);
               var total = totalPlus + summaplus;
               alert(total);
               wrapper.filters('.pengerpenger').text(total);

               var summaUp = $('.summa').text();
                    summaUp = parseInt(summaUp);
                    var Plus = summaUp + summaplus;
                    $('.Geld').text(Plus);
                    $('.summa').text(Plus);
                }else{
                    $('.inputQuantity').val(1);
                }
    });

    $('.qantetyImgMinus').on('click', function(){
        var wrapperMinus = $(this).closest(".basDiv");
        quantetyMinus = wrapperMinus.find('.inputQuantity').val();
        alert('test');
        if(quantetyMinus >= 2){
            var quantatyNumber = quantetyMinus - 1;
            $('.inputQuantity').val(quantatyNumber);
               var summaminus = wrapperMinus.find('.inputQuantity').attr('id');
               var totalMinus = wrapperMinus.find('.pengerpenger').text();
               totalMinus = parseInt(totalMinus);
               summaminus = parseInt(summaminus);
               var Minus = totalMinus - summaminus;
               alert(Minus);
               wrapperMinus.filter('.pengerpenger').text(Minus);
               //
               var summaDown = $('.summa').text();
                    summaDown = parseInt(summaDown);
                    var total = summaDown - summaminus;
                    $('.Geld').text(total);
                    $('.summa').text(total);
        }else if(quantetyMinus === 1){
            $('.inputQuantity').val(1);
        }
    });

但是现在,如果我单击Plus图像,它可以很好地工作,它可以更改总价,但是它会更改类名称为“ pengerpenger”的所有跨度的价格,而我只需要在同一div块中使用类名称为“ basDiv”的它会更改所有输入框的值。

答案 1 :(得分:0)

如果相同的身体需要代码则固定

 $('.qantetyImgPlus').on('click', function(){
    var wrapper = $(this).closest(".basDiv");
        quantety = wrapper.find('.inputQuantity').val();
        quantety = parseInt(quantety);
        if(quantety >= 1){
            var quantatyNumber = quantety + 1;
            wrapper.find('.inputQuantity').val(quantatyNumber);
               var summaplus = wrapper.find('.inputQuantity').attr('id');
               var totalPlus = wrapper.find('.pengerpenger').text();
               totalPlus = parseInt(totalPlus);
               summaplus = parseInt(summaplus);
               var total = totalPlus + summaplus;
               wrapper.find('.pengerpenger').text(total);

               var summaUp = $('.summa').text();
                    summaUp = parseInt(summaUp);
                    var Plus = summaUp + summaplus;
                    $('.Geld').text(Plus);
                    $('.summa').text(Plus);
                }
    });

    $('.qantetyImgMinus').on('click', function(){
        var wrapperMinus = $(this).closest(".basDiv");
        quantetyMinus = wrapperMinus.find('.inputQuantity').val();
        quantetyMinus = parseInt(quantetyMinus);
        if(quantetyMinus >= 2){
            var quantatyNumber = quantetyMinus - 1;
            wrapperMinus.find('.inputQuantity').val(quantatyNumber);
               var summaminus = wrapperMinus.find('.inputQuantity').attr('id');
               var totalMinus = wrapperMinus.find('.pengerpenger').text();
               totalMinus = parseInt(totalMinus);
               summaminus = parseInt(summaminus);
               var Minus = totalMinus - summaminus;
               wrapperMinus.find('.pengerpenger').text(Minus);
               //
               var summaDown = $('.summa').text();
                    summaDown = parseInt(summaDown);
                    var total = summaDown - summaminus;
                    $('.Geld').text(total);
                    $('.summa').text(total);
        }else if(quantetyMinus === 1){

        }
    });