possiamo usare e operatore per combinare più eventi jQuery

Question

Voglio usare jQuery per vedere se sono state cambiate tre caselle di testo in modo da poter inviare i dati tramite AJAX.

Ho provato un semplice script:

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

Dove nome, posizione e lo stipendio sono i rispettivi ID di tre casella di testo.

Il risultato fu che quando cambio la prima:

E quando ho cambiato il secondo:

E qui è il terzo:

Quindi, ho ricevuto il messaggio ogni volta che viene cambiata ogni casella di testo. Quello di cui ho bisogno è quando i tre sono cambiati, mostra il messaggio. Sono nuovo di jQuery, quindi voglio sapere se posso usare qualcosa come IF ... AND ... AND in jQuery.

Answer 1

Un sacco di framework di convalida ha il concetto di input dirty una volta che un utente ha modificato il valore. Potresti implementarlo e controllare quando tutti i tuoi campi sono sporchi.

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

Possiamo astratto questo fuori in un plugin jQuery per la ri-usabilità

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

Memorizza i selettori multipli in una variabile. Su .change() esegui un ciclo attraverso gli elementi nel selettore multiplo per verificare i valori di input. Se tutti gli input hanno contenuti, è possibile chiamare una funzione aggiuntiva.

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

è possibile memorizzare ingressi modificati in una matrice, e controllare la sua lunghezza per rilevare se tutti dove cambiato.

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

Answer 4

È inoltre possibile utilizzare questo approccio. 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

provare a utilizzare un classe:

<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

si può provare:

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

una possibile soluzione:

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

prima, è necessario init l'array "necessario" per tutti i campi obbligatori poi, quando un campo viene modificato, si rimuove quel campo dalla matrice necessaria una volta che l'array è vuoto, tutti i valori richiesti sono cambiati;)

la prima condizione è quello di garantire di non registrare il messaggio più di una volta

Answer 8

È possibile confrontare il valore corrente di ingresso a default uno, poi la logica potrebbe essere come il seguente:

btw, ho impostato una classe comune per tutti gli ingressi per controllare, perché questo è come dovrebbe essere fatto 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">