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

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>

Answer 2

这个有效：

$('body').on('input', '.example', function () 
{
   $('#result').text( $('.example[value="a"]').val().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 3

value属性描述了默认值而不是当前值.您不能使用属性选择器来解决此问题，因为您要处理当前值。

相反，您需要获取所有输入并一一测试它们的当前值。

您可以使用 the filter method。

$('body').on('input', '.example', function() {
  $('#result').text(
      $('.example').filter(function (index, element) {
          return ( element.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>

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

Why Jquery selector by 'value' not work in case of dynamic change

javascript

jquery

jquery-selectors