Question

嗨我想选择所有输入并写入输入字符，但我写的代码只选择第一个输入。

$('.select').keyup(function () { 
 
  var len = $('.myinput').val().length; 

    $('.val').text(len + ' character');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="select">
<input class="myinput" type="text">
<input class="myinput" type="text">
<input class="myinput" type="text">
<input class="myinput" type="text">
<input class="myinput" type="text">
<input class="myinput" type="text">
<input class="myinput" type="text">
<input class="myinput" type="text">
</div>
<div class="val"></div>

Answer 1

使用class =“myinput”遍历所有输入元素，并对输入值的长度求和

$('.select').keyup(function () { 
   var len= 0;
   
$('.myinput').each(function(){
    len += this.value.length;
});
  
  $('.val').text(len + ' character');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="select">
<input class="myinput" type="text">
<input class="myinput" type="text">
<input class="myinput" type="text">
<input class="myinput" type="text">
<input class="myinput" type="text">
<input class="myinput" type="text">
<input class="myinput" type="text">
<input class="myinput" type="text">
</div>
<div class="val"></div>

Answer 2

您可以尝试以下代码。代码会将所有id = "myinput"更改为class = "myinput"。然后在keyup事件中，选择所有input个类myinput的字段，并使用.each循环计算输入字段中所有字符的长度。最后，使用新长度更新div。

＆＃13;

$('.select').keyup(function () {
  let len = 0;
  $('.myinput').each( (i,v) => {
     len += $(v).val().length;
  }); 
  $('.val').text(len + ' character');
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="select">
  <input class="myinput" type="text">
  <input class="myinput" type="text">
  <input class="myinput" type="text">
  <input class="myinput" type="text">
  <input class="myinput" type="text">
  <input class="myinput" type="text">
  <input class="myinput" type="text">
  <input class="myinput" type="text">
</div>
<div class="val">
</div>

＆＃13;

Answer 3

您需要计算每个元素的长度，因为您可以根据需要使用.each()来增加len。

最好使用class代替id。因为它id只会返回文档中的第一个元素。

＆＃13;

$('.select').keyup(function() {
    var len = 0;

    $('.myinput').each(function() {

        len += $(this).val().length;

    });

    $('.val').text(len + ' character');
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="select">
<input class="myinput" type="text">
<input class="myinput" type="text">
<input class="myinput" type="text">
<input class="myinput" type="text">
<input class="myinput" type="text">
<input class="myinput" type="text">
<input class="myinput" type="text">
<input class="myinput" type="text">
</div>
<div class="val"></div>

＆＃13;

这是一个工作示例。 https://jsfiddle.net/xk6q81rd/11/

Jquery选择多重div

3 个答案: