Мы можем использовать и оператор для объединения нескольких событий jQuery

Я хочу использовать jQuery, чтобы увидеть, изменились ли три текстовых поля, чтобы я мог отправлять данные через AJAX.

Я попробовал простой script:

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

Если имя, должность и зарплата являются соответствующими идентификаторами трех текстовых полей.

В результате я изменил первый:

И когда я изменил второе:

И вот третий:

Итак, у меня есть сообщение, когда отдельно меняется каждое текстовое поле. То, что мне действительно нужно, - это когда три изменились, отобразите сообщение. Я новичок в jQuery, поэтому хочу знать, могу ли я использовать что-то вроде IF ... AND ... AND в jQuery.

Ответ 1

Многие рамки проверки имеют концепцию грязного ввода, когда пользователь изменил значение. Вы можете реализовать это и проверить, загрязнены ли все ваши поля.

$("#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" />

Ответ 2

Вы можете хранить измененные входы в массиве и проверять длину, чтобы определить, все ли они были изменены.

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

Ответ 3

Вы можете попробовать:

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

Вы также можете использовать этот подход. 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

Храните несколько селекторов в переменной. В .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">

Ответ 6

Попробуйте использовать класс:

<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!');
     }
});

Ответ 7

одно возможное решение:

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");
});

во-первых, вам нужно инициализировать массив "необходимо" для всех обязательных полей то, когда поле изменяется, вы удаляете это поле из необходимого массива после того, как массив пуст, все необходимые значения изменены;)

первое условие заключается в том, чтобы не записывать сообщение более одного раза

Ответ 8

Вы можете сравнить текущее значение ввода по умолчанию, тогда логика может выглядеть следующим образом:

btw, я устанавливаю общий класс для всех входов, чтобы проверить, потому что так должно быть сделано 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">