jQuery - Comment simplifier le code qui effectue des fonctions similaires, mais légèrement différentes?

Question

J'ai plusieurs lignes de code qui remplissent des fonctions similaires (elles prennent les valeurs des entrées et ajoutent une ligne de code). Y a-t-il un moyen de simplifier ces choses?

//======Name 
     var name = $('input[name=Name]').val(); 
     if (name){ 
     $('.results').append('<div class="item">' + '<p>Your name is ' + name + '.</p>' + '</div>');} 
//======Age 
     var age = $('input[name=YourAge]:checked').val(); 
     if (age){ 
     $('.results').append('<div class="item">' + '<p>Your age is ' + age + '.</p>' + '</div>');} 
//======Occupation 
     var occupation = $('input[name=Occupation]').val(); 
     if(occupation){ 
     $('.results').append('<div class="item">' + '<p>Your occupation is ' + occupation + '.</p>' + '</div>');} 

Answer 1

Regardez ce qui est la même dans chaque pièce, et ce qui est différent. Tourner les pièces similaires dans le corps d'une fonction, et de faire les différentes parties les paramètres de la fonction:

function appendResult(selector, label) { 
    var result = $(selector).val(); 
    if (result){ 
     $('.results').append('<div class="item">' + '<p>Your ' label ' is ' + result + '.</p>' + '</div>'); 
    } 
} 

Ensuite, l'utiliser comme:

appendResult('input[name=Name]', 'name'); 

appendResult('input[name=YourAge]:checked', 'age'); 

appendResult('input[name=Occupation]', 'occupation'); 

Remarquez comment seulement chaque morceau de code est différent par le sélecteur utilisé, et le "label" imprimé pour décrire l'article. Ces deux pièces deviennent les paramètres, et après avoir renommé certaines variables, vous aurez une fonction généralisée que vous pourrez utiliser.

Answer 2

Vous pouvez simplement créer une fonction. J'ai ajouté .toLowerCase afin qu'il soit logique Vous devrez, bien sûr, appeler la fonction et passer le champ en argument.

checkExists($('input[name=Name]'));