jQuery - 我如何簡化執行相似但功能稍有不同的代碼？

我有幾行代碼執行類似的功能（他們從輸入值和附加一行代碼）。有沒有辦法可以簡化這些？jQuery - 我如何簡化執行相似但功能稍有不同的代碼？

//======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>');}

來源

2017-08-26 Ethan

看看什麼是在每一塊相同的，這有什麼不同。轉動類似的部分成一個函數的主體中，並且使不同的部分的參數的函數：

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

然後，使用它喜歡：

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

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

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

通知如何每段代碼只不同通過使用的選擇器和印刷的「標籤」來描述物品。這兩部分成爲參數，並且在您重命名一些變量之後，您將擁有一個可以使用的泛化函數。

來源

2017-08-26 02:21:09 Carcigenicate

迄今爲止的最佳解決方案+ 1。但你不能發送數組作爲參數，所以只有一個調用它會做每一件事，而不是三個函數調用？ –

@AlivetoDie你可以。你也可以將這個函數映射到'（selector，label）'的列表元組。這裏的想法是展示如何提取模式。您想要如何使用它並取決於場景。 – Carcigenicate

您可以創建一個函數。

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]'));

來源

2017-08-26 02:16:23

jQuery - 我如何簡化執行相似但功能稍有不同的代碼？

回答

相關問題