我们可以使用和操作来组合多个jQuery事件吗

I want to use jQuery to see if three text boxes are changed so I can send data through AJAX.

我想使用jQuery查看是否更改了三个文本框，以便通过AJAX发送数据。

I tried a simple script:

我尝试了一个简单的脚本:

$("#name, #position, #salary").change(function()
{
     console.log("All data are changed");
});

Where name, position and salary are the respective IDs of three text box.

其中姓名、职位和薪水分别为三个文本框的id。

The result was that when I change the first one:

结果是当我改变第一个的时候:

And when I changed the second:

当我改变第二个:

And here is the third one:

这是第三个

So, I've got the message when separately each text box is changed. What I do need is when the three are changed, display the message. I am new to jQuery, so I want to know if I can use something like IF ... AND ... AND in jQuery.

当每个文本框分别被修改时，我就得到了消息。我所需要的是当这三个被改变时，显示消息。我是jQuery的新手，所以我想知道我是否可以使用if…和…在jQuery。

8 个解决方案

#1

A lot of validation frameworks have the concept of a dirty input once a user has changed the value. You could implement this and check when all your fields are dirty.

一旦用户更改了值，许多验证框架都有脏输入的概念。您可以实现它，并在所有字段都是脏的时候进行检查。

$("#name, #position, #salary").change(function() {
  this.classList.add("dirty");
  if ($(".dirty").length === 3) {
    console.log("All data are changed");
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="name" />
<input id="position" />
<input id="salary" />

We can abstract this out into a jQuery plugin for re-usability

我们可以将其抽象为jQuery插件以实现重用

$.fn.allChange = function(callback) {
  var $elements = this;
  $elements.change(function() {
    this.classList.add("dirty");
    if (callback && $elements.filter(".dirty").length === $elements.length) {
      callback.call($elements);
    }
  });
  return $elements;
}

$("#name, #position, #salary").allChange(function() {
  console.log("All data are changed");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="name" />
<input id="position" />
<input id="salary" />

#2

You can store changed inputs in an array, and check it's length to detect if all of them where changed.

您可以在数组中存储已更改的输入，并检查它的长度，以检测它们是否都在更改的地方。

var changedInputs = [];
$("#name, #position, #salary").change(function()
{
     changedInputs.push(this.id);
     if(changedInputs.length === 3) {
       alert('All 3 inputs where changed!');
     }
});

#3

You can try:

你可以尝试:

var changedInputs = [];
$("#name, #position, #salary").change(function()
{
   if !(changedInputs.include(this.id) ){
     changedInputs.push(this.id);
     if(changedInputs.length == 3) {
        alert('All 3 inputs where changed!');
   }
});

#4

You can also use this approach. Fiddle

您也可以使用这种方法。小提琴

var isNameChanged, isPositionChanged, isSalaryChanged = false;

function fieldsChanged()
{
    var id = $(this).attr('id');
    if (id == 'name') isNameChanged = true;
    else if (id == 'position') isPositionChanged = true;
    else if (id == 'salary') isSalaryChanged = true;

  if (isNameChanged && isPositionChanged && isSalaryChanged) {
    console.log('All have been changed');
    isNameChanged = isPositionChanged = isSalaryChanged = false;
  }
}

$(function(){
    $('#name, #position, #salary').change(fieldsChanged);
});

#5

Try using a class:

试着用一个类:

<input class="need">
<input class="need">
<input class="need">
$(".need").change(function()
{
  var all = 0;
    $(".need").each(function(i,v){
        if ($(v).val().length >0 ) {
          all+=1; 
        }
    });
    if(all.length == 3) {
       alert('All 3 inputs where changed!');
     }
});

#6

Store the multiple selectors in a variable. On .change() loop through the elements in the multiple selector to test the input values. If all inputs have content an additional function can be called.

将多个选择器存储在一个变量中。在.change()循环遍历多个选择器中的元素，以测试输入值。如果所有输入都有内容，可以调用一个附加函数。

$(document).ready(function(){
  
  var $selectors = $('#input1, #input2, #input3');

  $selectors.change(function(){
    var allChanged = true;
    console.log($(this).attr('id') + ' was changed.');

    $selectors.each(function(){ 
      if ($(this).val() == '') {
        allChanged = false;
      }
    });

    if (allChanged) {
      // $().ajax();
    }

  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="input1">
<input id="input2">
<input id="input3">

#7

one possible solution:

一个可能的解决方案:

var needed = ["name", "position", "salary"];

$("#name, #position, #salary").change(function()
{
    if(needed.length == 0) return;
    needed.splice(needed.indexOf($(this).attr('id')), 1);
    if(needed.length == 0)
        console.log("All data are changed");
});

first, you need to init the array "needed" to all required fields then, when a field is changed, you remove that field from the needed array once the array is empty, all required values are changed ;)

首先，您需要将数组“required”初始化到所有必需的字段，然后，当一个字段被更改时，您将该字段从所需的数组中删除，当数组为空时，所有必需的值将被更改;)

the first condition is to ensure not to log the message more than once

第一个条件是确保不多次记录消息

#8

You can compare current input value to default one, then the logic could be like following:

可以将当前输入值与默认输入值进行比较，逻辑如下:

btw, i set a common class for all inputs to check, because this is how it should be done imho...

顺便说一句，我为所有输入设置了一个公共类来检查，因为这是应该执行的方式。

$('.inputToCheck').on('change', function() {
  var allInputsChanged = !$('.inputToCheck').filter(function() {
    return this.value === this.defaultValue;
  }).length;
  if (allInputsChanged) alert('All inputs changed!');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input id="name" class="inputToCheck">
<input id="position" class="inputToCheck">
<input id="salary" class="inputToCheck">

#1