Question

返回false并不是我想做的事情。如果任何一个条件传递，我希望它阻止表单提交，但我仍然希望它继续在条件树下。现在，如果第一个条件if ($(".item.active").length == 0) {通过，它会点击return false;并停止后续条件检查。

如何更好地重写它？

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

    function invalidBtn(){
        $('#go').addClass('invalid');
        setTimeout(function() {
            $('#go').removeClass('invalid');
        }, 5000)
    }

    $('.error').remove();
    $('.invalid').removeClass('invalid');

    if ($(".item.active").length == 0) {
        $(".item:first-of-type").before('<h5 class="error">Select a shirt type</h5>');
        invalidBtn();
        return false;

    } else {

        if ( $(".item.active .size-select .active").length == 0) {
            $('.item.active .size-select').before("<div class='error'>Select a size</div>").addClass("invalid");
            //$(this).addClass('invalid');
            invalidBtn();
            return false;
        }

        if ($(".item.active .gender-select").length > 0 ) {
            if ( $(".item.active .gender-select .active").length == 0 ){
                $('.item.active .gender-select').before("<div class='error'>Select a gender</div>").addClass("invalid");
                //$(this).addClass('invalid');
                invalidBtn();
                return false;
            }
        }
    }

    if ( !$('#fn-field').val() ) {
        $('#fn-field').before("<div class='error'>Enter your first name</div>").addClass("invalid");
        //$(this).addClass('invalid');
        invalidBtn();
        return false;
    }

    if ( !$('#ln-field').val() ) {
        $('#ln-field').before("<div class='error'>Enter your last name</div>").addClass("invalid");
        //$(this).addClass('invalid');
        invalidBtn();
        return false;
    }

});

非常感谢

Answer 1

只需将所有返回false替换为更改布尔值，然后返回布尔值，如下所示：

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

function invalidBtn(){
    $('#go').addClass('invalid');
    setTimeout(function() {
        $('#go').removeClass('invalid');
    }, 5000)
}

var retVal = true;

$('.error').remove();
$('.invalid').removeClass('invalid');

if ($(".item.active").length == 0) {
    $(".item:first-of-type").before('<h5 class="error">Select a shirt type</h5>');
    invalidBtn();
    retVal = false;

} else {

    if ( $(".item.active .size-select .active").length == 0) {
        $('.item.active .size-select').before("<div class='error'>Select a size</div>").addClass("invalid");
        //$(this).addClass('invalid');
        invalidBtn();
        retVal = false;
    }

    if ($(".item.active .gender-select").length > 0 ) {
        if ( $(".item.active .gender-select .active").length == 0 ){
            $('.item.active .gender-select').before("<div class='error'>Select a gender</div>").addClass("invalid");
            //$(this).addClass('invalid');
            invalidBtn();
            retVal = false;
        }
    }
}

if ( !$('#fn-field').val() ) {
    $('#fn-field').before("<div class='error'>Enter your first name</div>").addClass("invalid");
    //$(this).addClass('invalid');
    invalidBtn();
    retVal = false;
}

if ( !$('#ln-field').val() ) {
    $('#ln-field').before("<div class='error'>Enter your last name</div>").addClass("invalid");
    //$(this).addClass('invalid');
    invalidBtn();
    retVal = false;
}

return retVal;

});

Answer 2

返回false并不是我想做的事情。如果任何一个条件传递，我希望它阻止表单提交，但我仍然希望它继续在条件树下。现在，如果第一个条件if（$（“。item.active”）。length == 0）{pass，则命中返回false;并阻止后来的条件检查。

是的，因为return退出了该功能。

如果你想继续浏览它后面的代码，不要使用return，设置你最后返回的变量。 E.g：

var valid = true;

if (someInvalidCondition) {
    // ...do anyting condition-specific...
    valid = false;
}
if (someOtherInvalidCondition) {
    // ...do anyting condition-specific...
    valid = false;
}
// Rinse, repeat

// Done
return valid;

或者我通常喜欢返回错误的计数。或者错误的列表（数组）。等

Javascript：多层条件，使用＆＃34;返回false＆＃34;停止以后的条件检查

2 个答案: