javascript - 为什么 'value' 的 Jquery 选择器在动态变化的情况下不起作用

Question

我不确定为什么 jquery 选择器 value 不起作用，试图将输入的值更改为 "a" 但 length不是增量，请检查下面的简单示例:

$('body').on('input', '.example', function() {
  $('#result').text($('.example[value="a"]').length);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="example" value="a">
<input type="text" class="example" value="b">
<input type="text" class="example" value="c">

<div id='result'></div>

Answer 1

如果您动态更改值，属性选择器将不会选择它。您可以改用 filter()。

Attribute selector will not check the dom node's value property it only targets the element's attribute

$('body').on('input', '.example', function() {
  $('#result').text($('.example').filter(function() {
    return this.value == 'a'
  }).length);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="example" value="a">
<input type="text" class="example" value="b">
<input type="text" class="example" value="c">

<div id='result'></div>

---

或者您需要在输入事件上手动更新元素属性

$('body').on('input', '.example', function() {
  $(this).attr('value', this.value);
  $('#result').text($('.example[value="a"]').length);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="example" value="a">
<input type="text" class="example" value="b">
<input type="text" class="example" value="c">

<div id='result'></div>