jQuery - 類似しているがわずかに異なる機能を実行するコードを単純化するにはどうすればよいですか？

Question

私は同様の機能を実行するコードをいくつか持っています（入力から値を取り出し、コード行を追加します）。これらを簡略化する方法はありますか？

//======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

それぞれの作品に同じ何を見て、どのような違います。どのようにコードの各部分のみが異なって

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

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

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

注意：関数の本体の中に同様の部分を回して、関数に異なる部分のパラメータを作る：

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

すると、それが好きで使用使用されるセレクターによって、そして項目を説明するために印刷された "ラベル"。これらの2つの部分がパラメータになり、いくつかの変数の名前を変更すると、使用できる一般化された関数が得られます。

Answer 2

関数を作成することができます。

function checkExists(field) { 
      if(field) { 
       $('.results').append('<div class="item">' + '<p>Your ' + field.attr('name').toLowerCase() + ' is ' + field + '.</p>' + '</div>'); 
      } 
     } 

私はそれが文法的に理にかなって.toLowerCaseを追加しました。 もちろん、関数を呼び出してフィールドを引数として渡す必要があります。

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