Question

我试图通过jQuery获取具有特定值的电子邮件输入的总数。

我尝试使用[value=somevalue]选择器，如下面的代码所示：

＆＃13;

$(function(){
  $('button').click(function(){
    $('#counter').text( $('input[value="test"]').length);
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<input type="email" value="test">
<input type="email">
<input type="email">
<button>test</button>
<br><br><span style="color:red;">Length: </span>
<span id="counter"></span>

＆＃13;

但无论用户在那里输入什么值，它都只显示1。

即使用户从第一个输入元素中删除test值，单击该按钮仍然会显示1。

任何想法，请帮忙吗？

Answer 1

我认为以下是你想要的：

$(function(){
  $('button').click(function(){
    var modelv = 'test';
    var matches = $('input').filter(function() { return $(this).val() === modelv; });
    $('#counter').text( matches.length );
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<input type="email" value="test">
<input type="email">
<input type="email">
<button>test</button>
<br><br><span style="color:red;">Length: </span>
<span id="counter"></span>

Answer 2

由于您需要比较动态值（作为用户输入），您可以执行以下操作：遍历每个电子邮件输入，将值放在数组中，检查是否存在重复项，并对其进行计数。（有无数的方法可以在数组中找到dupes，但我使用了简单的计数器变量，并检查数组中是否已存在值）。

$(function() {
  $('button').click(function() {
    vals = [];
    count = 0;
    flag = false;
    $('input[type="email"]').each(function() {
      if ($(this).val().length > 0) {
        v = $(this).val();
        if (vals.includes(v)) {
          flag = true;
          count++;
        }
        vals.push(v);
      }
    });
    console.log(vals);
    if (flag) {
      $('#counter').text(count + 1);
    } else $('#counter').text(count)
  });
});

演示：

$(function() {
  $('button').click(function() {
    vals = [];
    count = 0;
    flag = false;
    $('input[type="email"]').each(function() {
      if ($(this).val().length > 0) {
        v = $(this).val();
        if (vals.includes(v)) {
          flag = true;
          count++;
        }
        vals.push(v);
      }
    });
    console.log(vals);
    if (flag) {
      $('#counter').text(count + 1);
    } else $('#counter').text(count)
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="email">
<input type="email">
<input type="email">
<button>test</button>
<br><br><span style="color:red;">Length: </span>
<span id="counter"></span>

获取具有相同值的输入的长度

2 个答案: