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 - 我如何简化执行相似但功能稍有不同的代码？

回答

相关问题