Question

我有一个功能，我有三个输入字段。如果我在文本字段的任何位置输入值，它会将每个有值的文本字段减去我的totalNumber变量。

var totalNumber = 3;
var textFieldsLeft = 0;
var textFieldsHasValue = 0;

<input type = "text" id = "first">
<input type = "text" id = "second">
<input type = "text" id = "third">

如果用输入id =“first”输入内容，我该如何处理jquery， textFieldLeft的值为= 2，textFieldsHasValue = 1，totalNumber = 2。

这是我的jquery代码

$(this).keyup(function(){
  countValue = $(this).val().length;
  //alert(getText);
  if(countValue != 0){
    console.log('Yes indeed it has a value');
    $(this).css(colorBlue);
    //alert(id);


    }
});

我需要这个来追踪尚未填写的剩余字段数。

Answer 1

只需为所有输入设置一个公共类，然后在change事件上执行上述逻辑。

<强> HTML： -

<input type="text" id = "first" class="inps">
<input type="text" id = "second" class="inps">
<input type="text" id = "third" class="inps">

<强> JS： -

var totalNumber = 3;
var textFieldsLeft = 0;
var textFieldsHasValue = 0;


$(".inps").on("change", function(){
  textFieldsHasValue = 0;
  $(".inps").each(function(){
    if($(this).val() !==''){
       textFieldsHasValue++;
    }
  });
  textFieldsLeft = totalNumber - textFieldsHasValue;
});

注意： - 污染全球范围是一种不好的做法，应该避免。

Answer 2

我建议你不要对变量中的输入数字进行硬编码，而是要在JS中找到输入的length。

其次，我建议您只使用一个事件监听器，而不是监听所有输入（aka。delegated event）

看看：

<强> HTML：

<div class="inputs">
  <input type = "text" id = "first">
  <input type = "text" id = "second">
  <input type = "text" id = "third">
</div>

<强> JS：

var $inputs = $("input[type='text']");
var totalNumber = $inputs.length; //find the total number using .length

function checkInputs () {
  var textFieldsHasValue = 0;

    $inputs.each(function(i, el){
    if( "" !== $(el).val() ) {
        textFieldsHasValue++;
    }
  });

  var textFieldsLeft = totalNumber - textFieldsHasValue;

  console.log('totalNumber', totalNumber);
  console.log('textFieldsLeft', textFieldsLeft);
  console.log('textFieldsHasValue', textFieldsHasValue);
}

$('.inputs').on('keyup change', 'input', checkInputs); //add listeners to the parent div, but listen for inputs change

此外，我正在收听keyup和change事件，因为用户可以在没有键盘的情况下右键单击并粘贴值。

可以在此处看到代码的工作示例 - https://jsfiddle.net/skip405/ouxdwjeo/

Answer 3

向所有三个输入添加一个类，然后将一个事件绑定到该类然后，当其中一个输入触发事件时 textFieldsLeft = totalNumber -1; textFieldsHasValue ++;

＆＃13;

var totalNumber = 3;
var textFieldsLeft = 0;
var textFieldsHasValue = 0;

$('.txtbox').on('input', function(){
  countValue = $(this).val().length;
  //alert(getText);
  if(countValue != 0){
    console.log('Yes indeed it has a value');
    $(this).css('color', 'Blue');
   

    }
  check_txtField();
});

function check_txtField()
{
   textFieldsLeft= 0;
   textFieldsHasValue =0;
  $('.txtbox').each(function(){
    if($(this).val().length){
         textFieldsHasValue ++;
          textFieldsLeft = totalNumber - textFieldsHasValue;
    }
  })
  console.log('textFieldsLeft : ', textFieldsLeft, 'textFieldsHasValue : ', textFieldsHasValue);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type = "text" id = "first" class='txtbox'/>
<input type = "text" id = "second" class='txtbox'/>
<input type = "text" id = "third" class='txtbox'/>

＆＃13;

Answer 4

查看此FIDDLE。我还添加了一个timeout函数，不用计算每次按下一个键。

请注意，我已为每个class添加了textbox，但这不是必须的。亲自查看如何在没有class的情况下选择所有这些内容。（这很容易）

<input class="fields" type = "text" id = "first">
<input class="fields" type = "text" id = "second">
<input class="fields" type = "text" id = "third">

Answer 5

<input type = "text" id = "first" class = "myclass">
<input type = "text" id = "second" class = "myclass">
<input type = "text" id = "third" class = "myclass">

  var count = 0
  var all_count = 0
  $('.myclass').each(function() {
       all_count = all_count + 1
        if ($(this).val() == '') {
              count = count + 1
        }
    });

var non_empty = all_count - count
"The total empty text fields are" +count 
"The total text fields are" +all_count 
"The total non empty text fields are"+non_empty

Jquery减去不同的值

5 个答案: