某些类无法获取最接近的元素

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会更有效。

$(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

尝试一下以获得更好的解决方案

<img src="<?= str_replace('_sm', '_web', $image);?>">

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