Question

我确信这是一个简单的解决方案，但我在研究后还没想出来。

我有一个多页面输入表单，它显示输入字段中数据的摘要页面。输入字段有一个默认字符串，用于描述输入字段，基本上是'id'属性。当用户单击输入字段以输入数据时，默认数据将消失并输入新数据。如果用户未输入输入字段，则默认数据保持不变。摘要页面显示表单字段中的所有输入，包括默认数据。我遇到的问题是在显示摘要页面之前弄清楚默认数据的清晰程度。我确信这是一个简单的东西，我忽略了，但我需要另一套敏锐的眼睛和jquery敏锐。

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

Psuedo代码逻辑：“如果输入字段包含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()来制作数组（假设您的输入与当前数组的顺序相同）

Answer 2

我使用占位符让它工作。输入字段中的默认文本在为摘要视图提交表单时消失，正如我所希望的那样。

Jquery：清除摘要表单输入值

2 个答案: