jquery - 如何使用 jQuery 选择器中文本框的当前值进行过滤？

Question

我有一个验证脚本，用于检查 data-* 属性以确定哪些字段是必需的。如果元素具有“data-required-if”属性(其值是 jQuery 选择器)，它会检查是否找到与该选择器匹配的任何元素。如果找到，则该字段为必填项。它执行类似于以下内容的操作:

$('[data-required-if]').each(function () {
  var selector = $(this).attr('data-required-if'),
      required = false;

  if ( !$(selector).length ) {
    required = true;
    // do something if this element is empty
  }
});

这很好用，但是有一个问题。当您使用属性选择器根据文本字段的当前值进行过滤时，它实际上是根据文本字段的初始值进行过滤。

<input
  type='text'
  id='myinput'
  value='initial text'
/>

<input
  type='text'
  id='dependent_input'
  value=''
  data-required-if="#myinput[value='']"
/>

// Step 1: type "foobar" in #myinput
// Step 2: run these lines of code:
<script>
  $('#myinput').val()                  //=> returns "foobar"
  $('#myinput[value="foobar"]').length //=> returns 0
</script>

我明白为什么要这样做。 jQuery 可能在后台使用 getAttribute()。有没有其他方法可以使用纯 jQuery 选择器根据输入框的当前值进行过滤？

Answer 1

您的另一个选择是创建一个选择器，如下所示:

jQuery.expr[':'].hasValue = function(a){ return $(a).val() !== ""; };

然后你可以像这样使用它:

$('#myinput:hasValue').length  //"1" if anything is typed in there