Jquery:清除汇总表单输入值

Question

我确信这是一个简单的修复，但经过研究我还没有弄清楚。

我有一个多页输入表单，它显示输入字段中数据的摘要页面。输入字段有一个描述输入字段的默认字符串，基本上是“id”属性。当用户单击输入字段输入数据时，默认数据消失并输入新数据。如果用户未在输入字段中进行任何输入，则默认数据将保持原样。摘要页面显示表单字段中的所有输入，包括默认数据。我遇到的问题是在显示摘要页面之前弄清楚默认数据的清晰度。我确信我忽略了一些简单的事情，但我需要另一双敏锐的眼睛和 jquery 的敏锐度。

摘要表单有两个并排嵌入 div 中的表格。我使用 nth-child() 方法选择正确的 td 来显示数据。

伪代码逻辑:“如果输入字段包含 attr('id')，则清除该字段；否则，显示该字段。”

我使用过 .val("")、.val()、.text("") 和 。 html("") 清除该字段无济于事。我需要一些专业的帮助。 :-)

    //prepare the fourth step
    var fieldsLeft = new Array(
        $('#firstname').val(),
        $('#middlename').val(),
        $('#lastname').val(),
        $('#address').val(),
        $('#city').val(),
        $('#zip').val(),
        $('#dob').val(),
        $('#ssn').val()
    )

    var fieldsRight = new Array(
        $('#homephone').val(),
        $('#workphone').val(),
        $('#cellphone').val(),
        $('#employer').val(),
        $('#emergency').val(),
        $('#relationship').val(),
        $('#phoneday').val(),
        $('#phonenight').val(),
        $('#email').val()
        );

    var sumLeft = $('#fourth_step #leftSummary tr');
    sumLeft.each(function() {
        var valueL = $(this).val();
        if ( valueL == fieldsLeft[$(this).attr('id')]) {
            $(this).children('td:nth-child(2)').val('');
        } else {
            $(this).children('td:nth-child(2)').html(fieldsLeft[$(this).index()])
        }
    });

    var sumRight = $('#fourth_step #rightSummary tr');
    sumRight.each(function() {
        var valueR = $(this).val();
        if ( valueR == fieldsRight[$(this).attr('id')]) {
            $(this).children('td:nth-child(2)').val('');
        } else {
            $(this).children('td:nth-child(2)').html(fieldsRight[$(this).index()])
        }
    }); 

Answer 1

如果 .hide() 适合你想要的，你可以尝试这样的事情:

//prepare the fourth step
var fieldsLeft = 
$('#firstname, #middlename, #lastname, #address, #city, #zip, #dob, #ssn').map(function(){
   return $(this).val();
});

var fieldsRight = 
$('#homephone,#workphone,#cellphone,#employer,#emergency,#relationship,#phoneday,#phonenight,#email').map(function(){
    return $(this).val();
});

var sumLeft = $('#fourth_step #leftSummary tr');
sumLeft.each(function() {
    var valueL = $(this).val();
    if ( valueL == fieldsLeft[$(this).attr('id')]) {
        $(this).children('td:nth-child(2)').hide();
    } else {
        $(this).children('td:nth-child(2)').show();
    }
});

var sumRight = $('#fourth_step #rightSummary tr');
sumRight.each(function() {
    var valueR = $(this).val();
    if ( valueR == fieldsRight[$(this).attr('id')]) {
        $(this).children('td:nth-child(2)').hide();
    } else {
        $(this).children('td:nth-child(2)').show();
    }
}); 

我还建议使用 .map() 来制作数组(假设您的输入与当前数组的顺序相同)