Question

我有4个表单除以jQuery UI选项卡，并希望计算（未保存的）表单更改并将其显示在选项卡标题中。

就像手机上的未读信息一样。

但是，我怎样才能为每个表单输入添加1而不是每次更改/按键时都添加？

var changes = 0;

    $('#form').on('keypress', 'input', function() {
        var active = $('#tabs').tabs('option', 'active');

        changes++;

        $("#tabs ul>li a").eq(active).find('.formChanges').text('(' + changes + ')');
    });

Answer 1

我看到两种方式：

第一种方法是为每个标签使用Object（或assoziative Array）和id

var changes = {sum: 0};

$('#form').on('keypress', 'input', function() {
  var active = $('#tabs').tabs('option', 'active');

  if(!($(this).id in changes)){
    changes[$(this).id] = true;
    changes.sum++;
  }

  $("#tabs ul>li a").eq(active).find('.formChanges').text('(' + changes.sum + ')');
});

小提琴https://jsfiddle.net/hosc4gzr/

第二种方法是标记已更改的表单并在需要时对其进行计数

$('#form').on('keypress', 'input', function() {
  var active = $('#tabs').tabs('option', 'active');

  $(this).attr('changed', 'true');

  $("#tabs ul>li a").eq(active).find('.formChanges').text('(' + $('#form[changed=true]').length + ')');
});

小提琴https://jsfiddle.net/6gbovvmk/

这不是工作代码。它应该只给你一个提示如何实现它。你必须采用这种方法之一来解决你的问题。我不能为你做，因为我不知道HTML代码：）

Answer 2

你可以这样做，我没有测试过这段代码，我直接在这里编写代码。

//列出输入字段及其值

var form_inputs={};
$('form input').each(function(){
   form_inputs[$(this).attr('name')]=$(this).val();
});
var change_counter=0;
var form_input_after_blur={};
$('form input').each(function(){
   $(this).blur(function(){
        form_input_after_blur[$(this).attr('name')]=$(this).val();
        change_counter=0;
        for(i in form_input_after_blur){
              if(form_inputs[i]!=form_input_after_blur[i]) change_counter++;
        }
        alert(change_counter);
   });
});

如何计算jQuery中的表单更改？

2 个答案: