某些類無法獲取最接近的元素

Question

我有一個函數可以捕獲輸入是否已更改，然后，如果值超過最大值，則會將值設置為最大值。 因此，您不能輸入超過最大值的值。 但是，如果您嘗試執行此操作，我想顯示一條錯誤消息，但我一直在努力獲取最接近的錯誤消息。 這是我的代碼；

 $(document).on('keydown keyup', '.quantity input', function(e) { var max = Number($(this).attr('max')); if ($(this).val() > max) { e.preventDefault(); $(this).val(max); $(this).closest('.quant_warn').show(); } else if ($(this).val() < 1) { e.preventDefault(); $(this).val(1); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="quantity"> <label>Quantity: </label> <div class="increment"> <span></span><span></span> </div> <input type="text" value="1" min="1" max="10"> <div class="decrement"> <span></span> </div> <div class="quant_warn" style="display: none;">only 10 in stock</div> </div> 

Answer 1

由於.quant_warn div不是input的父級，而是同級，因此您需要使用siblings()代替：

$(this).siblings('.quant_warn').show();

注意：跟蹤使用輸入時，使用input事件而不是使用keydown keyup input會更有效。

 $(document).on('input', '.quantity input', function(e) { var max = Number($(this).attr('max')); if ($(this).val() > max) { e.preventDefault(); $(this).val(max); $(this).siblings('.quant_warn').show(); } else if ($(this).val() < 1) { e.preventDefault(); $(this).val(1); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="quantity"> <label>Quantity: </label> <div class="increment"> <span></span><span></span> </div> <input type="text" value="1" min="1" max="10"> <div class="decrement"> <span></span> </div> <div class="quant_warn" style="display: none;">only 10 in stock</div> </div> 

Answer 2

試試這個更好的解決方案

 $(document).on('keydown keyup', '.quantity input', function(e) { var max = Number($(this).attr('max')); var val = parseInt($(this).val()); if (val) { if (val > max) { e.preventDefault(); $(this).val(max); $(this).siblings('.quant_warn').show(); } else { $(this).siblings('.quant_warn').hide(); } } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="quantity"> <label>Quantity: </label> <div class="increment"> <span></span><span></span> </div> <input type="text" value="1" min="1" max="10"> <div class="decrement"> <span></span> </div> <div class="quant_warn" style="display: none;">only 10 in stock</div> </div>