输入type ='number'事件keyup和keydown

Question

我尝试为输入类型编号创建一个事件。它位于购物篮页面上，如果用户点击按钮UP，则必须更改价格并降低价格。如果它只是篮子里的一个项目，它工作正常。但如果它是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>

变量quantatyNumber是全局的，用于查看click上的输入值是否更大。是否可以轻松解决我的问题？

一个带有'.Geld'类的div块在我的标题中。

Answer 1

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

$('.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);
        }
    });

但现在，如果我点击加号图像，它可以正常工作，它会改变总价格，但它改变了所有范围的价格，类名为“pengerpenger”，我只需要这个与同名div块同名“basDiv”，它会更改所有输入框的值。

Answer 2

修复了相同的身体需要代码

 $('.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){

        }
    });