jquery - 如何将选择器限制为与输入相关的特定元素？

Question

我希望字符计数代码适用于多个输入，但我不知道如何在我的键盘上实现每个函数，以便 .char-count 适用于最接近的 .输入

function checkTextAreaMaxLength(textBox, e) {
  var maxLength = parseInt($(textBox).data("length"));
  if (!checkSpecialKeys(e)) {
    if (textBox.value.length > maxLength - 1)
      textBox.value = textBox.value.substring(0, maxLength);
  }
  $(".char-count").html(maxLength - textBox.value.length);
  return true;
}
function checkSpecialKeys(e) {
  if (
    e.keyCode != 8 &&
    e.keyCode != 46 &&
    e.keyCode != 37 &&
    e.keyCode != 38 &&
    e.keyCode != 39 &&
    e.keyCode != 40
  )
    return false;
  else return true;
}

$(".input").on("keyup", function(event) {
  checkTextAreaMaxLength(this, event);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="item">
    <textarea class='input' rows='3' data-length=250 data-min-rows='3'></textarea>
    <h4><span class="char-count">250</span> chars remaining</h4>
</div>

<div class="item">
    <input class='input' data-length=120/>
    <h4><span class="char-count">120</span> chars remaining</h4>
</div>

Answer 1

只需使用 DOM 遍历来减少选择器。有很多方法可以做到这一点。这是使用祖先元素的一种方法:

$(textBox).closest('.item').find('.char-count').html(maxLength - textBox.value.length);

另一种方法是使用同级选择器:

$(textBox).siblings().find('.char-count').html(maxLength - textBox.value.length);

或者，更具体地说，下一个元素选择器:

$(textBox).next().find('.char-count').html(maxLength - textBox.value.length);

我喜欢对祖先选择器更具体一点，以防内部标记结构发生变化。 parent() 有时很脆弱。例如，如果您出于布局目的而在输入周围添加包装器(如使用 Bootstrap 时)，则 parent() 不再合适，并且您的脚本会中断。我发现定位标记组中最外层的元素更持久。 siblings() 和 next() 也有同样的想法。最好在选择器中保留一些灵 active 。

function checkTextAreaMaxLength(textBox, e) {
var maxLength = parseInt($(textBox).data("length"));

if (!checkSpecialKeys(e)) {
    if (textBox.value.length > maxLength - 1)
        textBox.value = textBox.value.substring(0, maxLength);
}

$(textBox).closest('.item').find('.char-count').html(maxLength - textBox.value.length);

return true;
}

function checkSpecialKeys(e) {
if (
    e.keyCode != 8 &&
    e.keyCode != 46 &&
    e.keyCode != 37 &&
    e.keyCode != 38 &&
    e.keyCode != 39 &&
    e.keyCode != 40
)
    return false;
else return true;
}

$(".input").on("keyup", function(event) {
checkTextAreaMaxLength(this, event);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="item">
<textarea class='input' rows='3' data-length=250 data-min-rows='3'></textarea>
<h4><span class="char-count">250</span> chars remaining</h4>
</div>
<div class="item">
<input class='input' data-length=120></input>
<h4><span class="char-count">120</span> chars remaining</h4>
</div>