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

你可以只创建一个函数。

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

Answer 2

看看每件作品的相同之处和不同之处。把相似的部分变成函数体，把不同的部分作为函数的参数：

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

注意每段代码的不同之处仅在于所使用的选择器，以及打印的 "label" 来描述该项目。这两部分成为参数，重命名一些变量后，您将拥有一个可以使用的通用函数。

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

jQuery - How do I simplify code that performs similar, but slightly different functions?

html

simplify