jQuery错误陷阱逻辑

Question

 $(document).ready(function() { $(".submit").click(function() { if($(".firstname").val()=='' && $(".gender").val()==0){ $(".regform input.firstname, .regform select.gender").css('border','3px solid red'); }else { $(".regform input.firstname, .regform select.gender").css('border','2px solid #78bdca'); } if($(".firstname").val()!='') { $(".steps.step3, .steps.step4, .steps.step5").fadeIn(1000).css({ display: "block" }); $(".submit").prop('value', 'Submit'); } }); }); 

 .steps { margin-bottom: 5px; text-align: center; } .regform select { width: 380px; margin: 0 auto; display: block; -webkit-border-radius: 7px; -moz-border-radius: 7px; border-radius: 7px; border: #78bdca 2px solid; font-family: 'quicksandregular'; font-size: 16px; padding: 12px 0 12px 12px; color: #78bdca; background: #fff url(/images/assets/hcd-dropdown.png) 96% 50% no-repeat; background-size: 15px auto; -webkit-appearance: none; -moz-appearance: button; appearance: button; text-overflow: ''; } .regform input { width: 380px; margin: 0 auto; display: block; -webkit-border-radius: 7px; -moz-border-radius: 7px; border-radius: 7px; border: #78bdca 2px solid; font-family: 'quicksandregular'; font-size: 16px; padding: 12px 0 12px 12px; color: #78bdca; } .regform select[name=dobday], .regform select[name=dobmonth], .regform select[name=dobyear] { width: 124.5px; display: inline-block; } .steps.step3, .steps.step4, .steps.step5 { display: none; } .submit .myButton { -webkit-appearance: button; cursor: pointer; width: 380px; color: #fff; font-family: 'quicksandregular'; font-size: 16px; height: 44px; outline: 0; border: none; background: rgba(120, 189, 202, .9); padding: 0; } 

我想在逻辑上寻求帮助。 我是JS的新手

逻辑：

如果单击提交按钮，如果2个元素没有任何值，我将其设置在红色边框上（这已经实现。）以强调该错误。 现在，当我将值之一表示为元素时，我想在元素的红色边框上留下无值。

这是我的代码：

 $(document).ready(function() { $(".submit").click(function() { if($(".firstname").val()=='' && $(".gender").val()==0){ $(".regform input.firstname, .regform select.gender").css('border','3px solid red'); }else { $(".regform input.firstname, .regform select.gender").css('border','2px solid #78bdca'); } if($(".firstname").val()!='') { $(".steps.step3, .steps.step4, .steps.step5").fadeIn(1000).css({ display: "block", visibility: "visible" }); $(".submit .myButton").prop('value', 'Submit'); } }); }); 

感谢您的帮助！

Answer 1

您只需要分别检查其输入即可：

$(document).ready(function() {
    $(".submit").click(function() {
        // Check for firstname input state
        if($(".firstname").val()==''){
            // Not filled, change to red
            $(".regform input.firstname").css('border','3px solid red');
        }
        else{
            // Filled, change to blue
            $(".regform input.firstname").css('border','2px solid #78bdca');
        }
        // Check for gender input state
        if($(".gender").val()==0){
            // Not filled, change to red
            $(".regform select.gender").css('border','3px solid red');
        }
        else{
            // Filled, change to blue
            $(".regform select.gender").css('border','2px solid #78bdca');
        }
    }); 
});

因此，它们中的每一个都会有自己的检查条件，如果正确填写，它将变成蓝色，否则它将变成红色。 另外，此JSFiddle中提供了一个完整的示例。

PS：我从您的Javascript / jQuery代码中删除了一些功能，因为它们对我而言尚不清楚。 随时将它们重新添加到应有的位置。

PS2：在我的小提琴中，我还将.submit类从div更改为.submit-div ，并将.submit类添加到了按钮中。 如果您希望以原始方式使用它，请相应更改回我提供的代码！

Answer 2

使用数组并存储DOM对象。 单击提交按钮时，遍历数组，检查其值并应用css

$(document).ready(function() {
        $(".submit").click(function() {
            // An array to store DOM object
            var inpElem = [$(".firstname"), $(".gender")]
            // Iterate through it and check it's value 
            inpElem.forEach(function(item) {
                console.log(item.val)
                if (item.val() == '') {
                    item.css('border', '3px solid red');
                } else {
                    item.css('border', '2px solid #78bdca');
                }
            })
            if ($(".firstname").val() != '') {
                $(".steps.step3, .steps.step4, .steps.step5").fadeIn(1000).css({
                    display: "block",
                    visibility: "visible"
                });

                $(".submit .myButton").prop('value', 'Submit');
            }
        });
    });

的jsfiddle