jQuery选择器。为什么只有第一个孩子才有反应

时间:2016-11-06 13:58:39

标签: jquery

好的,我正在做这个jQuery,似乎无法让所有孩子都工作。 只有第一个孩子做了它所说的......它附加了一个错误行。 为什么其他人被忽视?

$(document).ready(function() {
    var firstName = $('input[name=firstName]').val();
    var lastName = $('input[name=lastName]').val();
    var email = $('input[name=email]').val();
    var address = $('input[name=addressBox').val();
    var phoneNum = $('input[name=phoneNumber').val();
    var dob = $('input[name=dob').val();

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

    if (firstName.length < 2) {
        $("form label:first-child").append("<p class='turnsRed'>You need to enter your first name</p>");
    } else if (lastName.length < 2) {           
        $("form label:nth-child(3)").append("<p class='turnsRed'>You need to enter your last name</p>");
    } else if (address.length < 2) {
        $("form label:nth-child(4)").append("<p class='turnsRed'>You need to enter your address</p>");
    } else if (dob.length < 1) {
        $("form label:nth-child(5)").append("<p class='turnsRed'>You need to enter your date of birth</p>");
    } else if (email.length < 2) {
        $("form label:nth-child(6)").append("<p class='turnsRed'>You need to enter your email</p>");
    } else if (phoneNum.length < 1) { 
        $("form label:nth-child(7)").append("<p class='turnsRed'>You need to enter your phone number</p>");

    };

});
});

html位看起来像这样:

<form>
    <label for="first name">Your first name</label><br>
    <input type="text" name="firstName" value=""><br>
    <label for="middle name">Your middle name (optional)</label><br>
    <input type="text" name="middle name" value=""><br>
    <label for="last name">Your last name</label><br>
    <input type="text" name="lastName" value=""><br>
    <label for="your address">Your address (inc. zip/post code)</label><br>
    <input type="text" name="addressBox" value=""><br>
    <input type="text" name="addressBox" value=""><br>
    <input type="text" name="addressBox" value=""><br>
    <input type="text" name="addressBox" value=""><br>
    <label for="dof">Your date of birth</label><br>
    <input type="text" name="dob" value=""><br>
    <label for="your email">Your email</label><br>
    <input type="email" name="email" value=""><br>
    <label for="phone number">Your mobile phone number</label><br>
    <input type="number" name="phoneNumber" value="">

</form>

第二个孩子被故意遗漏'因为它与中间名相关联,这是可选的。

2 个答案:

答案 0 :(得分:0)

var firstName = $('input[name=firstName]').val();

此时返回输入的值。

过了一会儿,当您点击按钮时,firstName仍然是之前的值。

因此,您需要做的是动态获取值。

答案 1 :(得分:0)

首先,您要在文档就绪事件中立即获取输入值,这样您的代码就不会知道更改。在点击事件中移动你的getters,你将能够获得他们的最新价值。考虑到这一点,我在代码上做了一些改进,如下所示。

$(document).ready(function() {
    $('#submitbtn').click(function() {      
        var firstName = $('input[name=firstName]').val();
        var lastName = $('input[name=lastName]').val();
        var email = $('input[name=email]').val();
        var address = $('input[name=addressBox]').val(); // typo
        var phoneNum = $('input[name=phoneNumber]').val(); // typo
        var dob = $('input[name=dob]').val(); // typo

        // Remove old warnings in case of duplication
        $("form .turnsRed").remove();

        if (firstName.length < 2) {
            $("form label:first-child").append("<p class='turnsRed'>You need to enter your first name</p>");
        } else if (lastName.length < 2) {           
            $("form label:nth-child(3)").append("<p class='turnsRed'>You need to enter your last name</p>");
        } else if (address.length < 2) {
            $("form label:nth-child(4)").append("<p class='turnsRed'>You need to enter your address</p>");
        } else if (dob.length < 1) {
            $("form label:nth-child(5)").append("<p class='turnsRed'>You need to enter your date of birth</p>");
        } else if (email.length < 2) {
            $("form label:nth-child(6)").append("<p class='turnsRed'>You need to enter your email</p>");
        } else if (phoneNum.length < 1) { 
            $("form label:nth-child(7)").append("<p class='turnsRed'>You need to enter your phone number</p>");
        };
    });
});

在验证部分,如果要同时验证所有值,则必须删除else条件。