Wie fusionieren 2 jquery Funktionen

Question

Unten ist mein jQuery-Code, und ich will diese zwei Funktionen in 1.

$("#first_name").change(function() { 
    $('.showvalue').text("First Name Successfully Updated."); 
}); 

$("#last_name").change(function() { 
    $('.showvalue').text("last Name Successfully Updated."); 
}); 

Answer 1

Diese Show wird fusionieren „Vorname erfolgreich aktualisiert.“ für den Vornamen und "Nachname erfolgreich aktualisiert". für den Nachnamen:

var names = ['First', 'Last']; 
for (var i = 0; i < names.length; i++) { 
    var name = names[i]; 
    $("#" + name.toLowerCase() + "_name").change(function() { 
    $('.showvalue').text(name + " Name Successfully Updated."); 
    }); 
} 

Das hält also Ihre Großschreibung der Feldnamen.

Diese Lösung lässt sich auch einfach um weitere Felder erweitern.

Answer 2

die Selektoren kombinieren und dann in Ereignishandler überprüfen Sie die ID, um zu bestimmen, welche Nachricht zu verwenden:

$("#first_name, #last_name").change(function() { 
    var prefix = this.id === 'first_name' ? 'First' :'Last'; 
    $('.showvalue').text(prefix + " Name Successfully Updated."); 
}); 

Answer 3

Sie können die gleiche Funktion in Javascript für Elemente mit CLASS Selektor

(Beispiel Wiederverwendung Klasse: ChangeTrigger).

<p>First Name <input type="text" id="first_name" class="changeTrigger" data-ref="First Name"/></p> 
<p>Last Name <input type="text" id="last_name" class="changeTrigger" data-ref="Last Name"/></p> 
<p class='showvalue'></p> 

Zweitens definieren eine Funktion Multi-Elemente in derselben Klasse

$(".changeTrigger").change(function(){ 

    //You may use data-ref to attach "FIELD NAME" on element. 
    var refName = $(this).data("ref"); 

    $('.showvalue').text(refName + " Successfully Updated."); 
}); 

https://jsfiddle.net/u3f8505q/