Question

我花了最后一小时在JQuery，Stackoverflow和谷歌试图找出我做错了什么！

我试图限制输入中的数字，使其必须介于1和最大数字之间，最大数字在span.maximum中定义

HTML：

<li>
  <div>
    <span class="maximum">5</span>
  </div>
  <div>
    <input type="number" onchange="limiter(this);">
  </div>
</li>

Jquery：

function limiter(input) {
max = $(this).closest("li").find(".maximum").text();

if (input.value < 1) input.value = 1, alert(max);
if (input.value > max) input.value = max, alert(max);
}

如果用

替换第2行，它会起作用

max = $(".maximum").text();

但是我试图去最近的李氏祖先，然后到达那个李的最大值。可能还有其他DOM元素，因此它只能是一定数量的父母，然后是一定数量的孩子。

Answer 1

在方法this引用窗口对象时，您需要使用input引用来查找最接近的元素，因为input引用了已更改的元素。您还可以在比较之前将值转换为数字

＆＃13;

function limiter(input) {
  var max = +$(input).closest("li").find(".maximum").text() || 0;
  var value = +input.value;

  if (value < 1) {
    input.value = 1;
    alert(max);
  }
  if (value > max) {
    input.value = max;
    alert(max);
  }
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
  <li>
    <div>
      <span class="maximum">5</span>
    </div>
    <div>
      <input type="number" onchange="limiter(this);" />
    </div>
  </li>
</ul>

＆＃13;

使用jQuery事件处理程序

将更多jQuery-ish

＆＃13;

$('.myinput').change(function() {
  var max = +$(this).closest("li").find(".maximum").text() || 0;
  var value = +$(this).val() || 0;

  if (value < 1) {
    $(this).val(1);
  } else if (value > max) {
    $(this).val(max);
  }
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
  <li>
    <div>
      <span class="maximum">5</span>
    </div>
    <div>
      <input class="myinput" type="number" />
    </div>
  </li>
</ul>

＆＃13;

Answer 2

我讨厌在HTML中进行事件分配，因为我无法确定这是什么＆＃39;这个＆＃39;指向:)，所以我建议在代码中分配事件，如下所示：

function limiter() {
    max = $(this).closest("li").find(".maximum").text();
if (this.value < 1) this.value = 1, alert(max);
if (this.value > max) this.value = max, alert(max);
}

$('input').on('change', limiter);

JQuery使用选择器获取最近祖先的后代的内容

2 个答案: