können wir verwenden und Operator mehrere jQuery-Ereignisse zu kombinieren

Question

Ich möchte jQuery verwenden, um zu sehen, ob drei Textfelder geändert werden, so dass ich Daten über AJAX senden kann.

habe ich versucht, ein einfaches Skript:

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

Wo Name, Position und Gehalt die jeweiligen IDs von drei Textfeld sind.

Das Ergebnis war, dass, wenn ich ändern, um die erste:

Und wenn änderte ich die zweite:

Und hier ist der dritte:

Also, ich habe die Nachricht, wenn separat jedes Textfeld geändert wird. Was ich brauche ist, wenn die drei geändert werden, die Nachricht anzeigen. Ich bin neu bei jQuery, also möchte ich wissen, ob ich etwas wie IF ... AND ... AND in jQuery verwenden kann.

Answer 1

Viele Validierungs-Frameworks haben das Konzept einer fehlerhaften Eingabe, sobald ein Benutzer den Wert geändert hat. Sie können dies implementieren und überprüfen, wenn alle Ihre Felder schmutzig sind.

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

Wir abstrahieren kann diese heraus in eine jQuery-Plugin für die Wiederverwendbarkeit

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

Speichern Sie die Mehrfachselektoren in einer Variablen. Wechseln Sie unter .change() durch die Elemente im Mehrfachselektor, um die Eingabewerte zu testen. Wenn alle Eingänge Inhalt haben, kann eine zusätzliche Funktion aufgerufen werden.

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

können Sie speichern geänderte Eingaben in einem Array, und überprüfen Sie es Länge, wenn alle von ihnen, wo geändert zu erkennen ist.

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

Answer 4

Sie können diesen Ansatz auch verwenden. 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

Versuchen Sie, eine Klasse mit:

<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

Sie können versuchen:

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

eine mögliche Lösung:

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

erste, müssen Sie das Array init "benötigt" zu allen Pflichtfeldern dann, wenn ein Feld geändert wird, Sie das Feld von der benötigten Array entfernen, sobald das Array leer ist, werden alle erforderlichen Werte geändert;)

die erste Bedingung ist, um sicherzustellen, nicht die Nachricht mehr als einmal anmelden

Answer 8

können Sie aktuellen Eingangswert vergleichen auf dem Standard, dann Die Logik könnte wie folgt aussehen:

btw, habe ich eine gemeinsame Klasse für alle Eingänge zu überprüfen, denn das ist, wie es 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">