Javascript:多层条件，使用"return false"停止以后的条件检查

Javascript: multi-tiered conditional, use of "return false" stopping later conditional checks

本文关键字：条件 quot 检查 false return 使用 Javascript 更新时间：2023-09-26

返回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;
    }
});

Thanks so much

只需替换所有返回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;
});

返回false不完全是我想要它做的。我希望它在任何一个条件通过时阻止表单提交，但我仍然希望它沿着条件树继续下去。现在如果第一个条件if ($(".item.active")。Length == 0){通过，则返回false;并停止后面的条件检查。

正确，因为return退出函数。

如果您想继续检查它后面的代码，不要使用return，在末尾设置一个返回的变量。例如:

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

或者我通常希望返回错误的计数。或者错误列表(数组)。等。