Możemy użyć operatora i połączyć wiele zdarzeń jQuery

Question

Chcę użyć jQuery, aby sprawdzić, czy trzy pola tekstowe zostały zmienione, więc mogę wysyłać dane przez AJAX.

próbowałem prosty skrypt:

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

Gdzie nazwisko, stanowisko i wynagrodzenie są odpowiednie identyfikatory z trzech polu tekstowym.

Rezultatem było to, że kiedy zmieni się pierwszy:

I kiedy zmienił drugie:

A oto trzeci:

Tak, mam wiadomość, gdy osobno zmienia się każde pole tekstowe. To, czego potrzebuję, to to, że kiedy trzy zostaną zmienione, wyświetl wiadomość. Jestem nowy w jQuery, więc chcę wiedzieć, czy mogę użyć czegoś takiego jak IF ... AND ... AND w jQuery.

Answer 1

Wiele frameworków do sprawdzania poprawności ma koncepcję brudnego wejścia, gdy użytkownik zmieni wartość. Możesz to zaimplementować i sprawdzić, czy wszystkie twoje pola są brudne.

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

Możemy abstrakcyjny na to uwagę w plugin jQuery do ponownego użycia

$.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" />

Answer 2

Zapisz wiele selektorów w zmiennej. Na .change() zapętlić elementy w selektorze wielokrotnym, aby przetestować wartości wejściowe. Jeśli wszystkie wejścia mają treść, można wywołać dodatkową funkcję.

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

Answer 3

można zapisać zmienione wejść w tablicy i sprawdzić jego długość, aby wykryć, czy wszystkie z nich, gdzie zmienił.

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

Answer 4

Możesz także użyć tego podejścia. 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); 
}); 

Answer 5

Spróbuj użyć klasę:

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

Answer 6

Można spróbować:

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

Answer 7

jedno możliwe rozwiązanie:

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

pierwsze, trzeba init tablicę "potrzebne" do wszystkich wymaganych pól wtedy, gdy pole jest zmieniana, usunięcie tego pola z poszkodowanym tablicy gdy tablica jest pusta, wszystkie wymagane wartości są zmieniane;)

pierwszym warunkiem jest zapewnienie, aby nie logować się komunikat o więcej niż raz

Answer 8

Możesz porównać wartość prądu wejściowego do domyślnego, a następnie logika może być następująca:

BTW ustalić wspólną klasę dla wszystkich wejść, by sprawdzić, ponieważ jest to w jaki sposób powinno się to odbywać 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">