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

Question

我尝试为输入类型编号创建一个事件。它在购物篮页面上，如果用户点击向上按钮，它也必须更改价格和向下。如果它只是篮子里的一件物品，它工作得很好。但如果它是 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 是全局变量，用于查看点击时输入的值是否更大。是否有可能以简单的方式解决我的问题？

带有“.Geld”类的 div 块在我的标题中。

标签： jquery

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);
        }
    });

但是现在，如果我单击 Plus 图像，它可以正常工作，它必须更改总价格，但它会更改所有类名为“pengerpenger”的跨度的价格，我只需要与类名在同一个 div 块中“basDiv”，它改变了所有输入框的值。