Question

我试图阻止执行以下行：jQuery('#out1').append('success ');，如果先前和当前的购物车产品数量值相等。实际上，会有AJAX请求更新购物车，但是如果'change keyup mouseup'仅因为用户单击了输入字段而没有实际更改，我不希望发生这种情况。

我编写了这段代码，但是它无法正常工作，具体取决于更改方法，可以将当前值指定为上一个或下一个，然后再加上当前值（在注释掉的测试中，当前仅显示当前值）。

var timeout;
var prevVal;

jQuery('div.mycart').on('change keyup mouseup', 'input.qty', function(){
    if (timeout != undefined) clearTimeout(timeout); //cancel previously scheduled event  
    // if (prevVal == $(this).val()) return;
    jQuery('#out2').append(prevVal);
    if ($(this).val() == '') return;  
    prevVal = $(this).val();
    timeout = setTimeout(function() {   
         jQuery('#out1').append('success ');          
  }, 1000 );
});

https://jsfiddle.net/e8qg4kzu/

编辑：我将此代码放在我的登台网站上，在Chrome和Firefox上，成功仅触发一次，单击输入字段（不增加按钮）不会执行任何操作。与jQuery版本相同。 jsfiddle有什么问题？

Answer 1

我认为您已经使逻辑复杂化了。一个简单的变更侦听器即可。

$('input.qty').change(function(){
console.log('value' + $(this).val());
});

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
  color: red;
}

#banner-message {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

#banner-message.alt {
  background: #0084ff;
  color: #fff;
  margin-top: 40px;
  width: 200px;
}

#banner-message.alt button {
  background: #fff;
  color: #000;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="mycart">  
  <input type="number" id="quantity_123" class="input-text qty text" step="1" min="1" max="425" name="cart_qty" value="1" size="4" inputmode="numeric">
<p id="out1"></p>
<p id="out2"></p>
</div>

数量输入更改-捕获先前的值

1 个答案: