Question

晚上好，为看似微不足道的问题道歉。

我似乎无法将自己的大脑包裹在我想要完成的事情上。我觉得这是我所缺少的直截了当的事。

我正在尝试向错误div添加多个跨度，以便在输入和字段失去焦点时，我可以删除显示错误的跨度。

$('.required').val('');
$('#insert').on('click', function()
{
    var valid = true;
    msg = '';
    sp = '';

    $('.required').each(function() 
    {
        var reqs = $(this);
        reqd = reqs.attr('name');

        if (!reqs.val()) 
        {
            valid = false;

            if (reqd == 'username')
            {
                reqdfn = 'ID'
            }
            else if (reqd == 'lastname')
            {
                reqdfn = 'Last Name'
            }
            else if (reqd == 'firstname')
            {
                reqdfn = 'First Name'
            }
            else if (reqd == 'country')
            {
                reqdfn = 'Country'
            }

            msg += reqdfn + ' cannot be blank. <br/>';
            reqs.css({'border': '1px solid #C33', 'background-color': '#F6CBCA'});
        }
    });

    if (!valid)
    {
        //$('#error').html('');
        $('#error').slideDown();
        $('#error').append('<span class="' + reqd + '">' + msg +  '<span>');
    }
    else
    {
        alert('Submitted');
    }
});

它有一个小提琴here

我尝试过使用for循环，但不完全确定我需要放在那里。

我有一个谷歌，看看这里，我可以看到它确实需要一个for循环，但就像我说的，不太确定如何写它。

当我查看Firebug并记录了reqd的值时，它显示为最后使用的reqd。

我尝试了sp + = reqd，显然这给了我所有reqd的值，就像我预期的那样。

我只是对我出错的地方感到难过。

任何指针都会非常感激。

感谢。

Answer 1

我相信我理解......

将$('#error').append('<span class="' + reqd + '">' + msg + '<span>');移动到字段错误逻辑中。这样，每个有错误的字段都会附加一个新的范围。

然后你仍然可以在底部$('#error').slideDown();。

Answer 2

你需要在每个中添加附加内容。另外我建议创建一个对象，键是一个名称（来自输入），值将是人名。它会缩短你的代码。

$('.required').val('');
$('#insert').on('click', function(){
    var valid = true,
        msg = '',
        sp = '';

    var names = {
        'username' : 'ID',
        'lastname' : 'Last Name',
        'firstname' : 'First Name',
        'country' : 'Country'
    };

    $('.required').each(function() {
        var reqs = $(this);
        reqd = reqs.attr('name');

        if (!reqs.val()) 
        {
            valid = false;
            reqdfn = names[reqd];

            msg += reqdfn + ' cannot be blank. <br/>';
            reqs.css({'border': '1px solid #C33', 'background-color': '#F6CBCA'});

            $('#error').append('<span class="' + reqd + '">' + msg +  '<span>');
        }
    });

    if (!valid) {
        //$('#error').html('');
        $('#error').slideDown();

    } else {
        alert('Submitted');
    }
});

将多个span元素添加到div元素

2 个答案: