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

【问题标题】：How can I filter using the current value of a text box in a jQuery selector?如何在 jQuery 选择器中使用文本框的当前值进行过滤？
【发布时间】：2010-04-02 12:44:49
【问题描述】：

我有一个验证脚本，用于检查 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 选择器根据输入框的当前值进行过滤？

【问题讨论】：

注意：我刚刚也注意到了以下怪癖... $('#myinput[value]').length // => 返回 1 $('#patch_process').filter(' [value]').length // => 返回 0 我假设这意味着在后端 jQuery 代码中，filter 使用 .value 而 $() 使用 .getAttribute('value')。不幸的是，这对我没有帮助。我需要一个选择器。

标签： jquery textbox attributes selector

【解决方案1】：

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

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

那么你可以这样使用它：

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

【讨论】：

【解决方案2】：

你可以为“myinput”字段编写一个“更改”处理程序，将值存储在其他属性上，然后编写选择器来使用它。

我在http://gutfullofbeer.net/foobar.html 发布了一个演示/测试页面，以便您查看是否可以解决您的问题。

<script>
  $(function() {
    $('#clickee').click(function() {
      $('#count').text('' + $('#txt[bar=foo]').length);
    });
    $('#txt').change(function() {
      $(this).attr('bar', $(this).val());
    });
  });
</script>

...

<body>
  <input type='text' id='txt'>
  <button id='clickee'>click</button>

  <span id='count></span>
</body>

【讨论】：

【解决方案3】：

作为一个选项，您可以为所有输入标签添加一个具有默认值的属性。

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

那么，当你使用选择器的时候，你应该比较input的实际值和它的initialValue属性

【讨论】：