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

看看每件作品的相同之处，以及它们的不同之处。将相似的部分转换为函数的主体，并将不同的部分作为函数的参数：

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

请注意每段代码如何仅因所使用的选择器而异，并且打印“标签”以描述该项目。这两个部分成为参数，重命名一些变量后，您将拥有一个可以使用的通用函数。

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

jQuery - 如何简化执行类似但略有不同功能的代码？

2 个答案: