Question

我有一个包含3个输入字段和一个按钮的div。单击按钮时，我的js启动了。我的JS检查具有空值的输入并将它们放在红色背景中。一切正常。我的问题如下。让我们想象下面的情况：我只输入2个第一个输入字段，然后单击按钮。会发生什么是第三个输入将变为红色。正常。但是，当我然后将一些文本放入第三个输入并重新点击按钮时，它不会切换为红色。我不明白。希望有人能提供帮助。提前感谢您的回复。干杯。马克。

http://jsfiddle.net/g3b9S/

我的HTML：

<div id="userList">
    <input type="text" id="user1" class="verif" /><br>
    <input type="text" id="user2" class="verif" /><br>
    <input type="text" id="user3" class="verif" /><br>
    <input type="submit" id="btn" />
</div>

我的js：

$('#btn').click(function() {

    var myArray = [];

    var userList = $('#userList .verif');
    userList.each(function() {
        var userID = $(this).attr('id');
        var userName = $(this).val();

        if (!userName) {
            myArray.push({
                'id': userID,
                'name': userName
            });
        }
    });

    $.each(myArray, function(i, v) {
        $('#userList .verif[id=' + v.id + ']').css('background-color', 'red');
    });

});

Answer 1

您没有删除有效字段的背景颜色。您可以将整个事物简化为一个链式语句：

$('#btn').click(function() {
    $("#userList .verif")
        .css('background-color', "")
        .filter("[value='']")
        .css('background-color', 'red');
});

示例： http://jsfiddle.net/eKwJn/

Answer 2

因为在任何时候你都没有将场上的背景设置为白色。一旦将其更改为红色，它就会保持红色。首先重置背景：

$('input.verif').css('background-color', 'white');

<强> Updated jsFiddle

Answer 3

当您到达$.each(...时，myArray为空，因为没有任何文本框为空。重置背景作为您对该功能的第一件事： http://jsfiddle.net/g3b9S/4/

Answer 4

您需要在重新验证之前重置有效输入。另外，我建议您使用语义类，而不是在JS中内联背景颜色。这将为您以后的设计提供更大的灵活性。

$('#btn').click(function() {
    var userList = $(this).siblings('input.verif');
    // reset to white
    userList.removeClass('invalid');

    // invalidate empty inputs
    userList.each(function() {
        var el = $(this);
        if (el.val()=='') el.addClass('invalid');
    });
});

DEMO： http://jsfiddle.net/Bsywc/

此外，您可能希望在输入中添加新的HTML5 required属性，以进行自动浏览器内验证。有关详细信息，请参阅http://24ways.org/2009/have-a-field-day-with-html5-forms

Jquery - .click（）在首次尝试后未启动

4 个答案: