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

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

这里是它的一个小提琴这里

我已经尝试过使用for循环，但是不能完全确定我需要在其中放入什么。

我有一个Google并在这里查看，从中可以看出它确实需要一个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');
    }
});