Question

我正在努力以正确的顺序解雇。

我在$(document).ready之前定义了函数，但是，我在变量中使用了jQuery，所以它们需要在jquery.js之后加载，所以它们是＆＃39;也在$(document).ready内。

我的问题是，我设置它的方式，radioGroupStyle()在windowSize()函数内被调用，因此类会根据窗口大小进行更改（它也会在表单提交时调用），但radioGroupStyle()正在使用radio变量，该变量未定义，因为它在$(document).ready中定义。

我应该在javascript（而不是jQuery）中编写变量并将它们放在脚本的顶部吗？有没有更好的方法来写这个或订购这样，这样可以缓解这个问题？

Original Demo

Pointy's Suggestion Demo

Possibly working Demo

function supportsHtml5Validation() {
    return typeof document.createElement('input').checkValidity === 'function';
}

function windowSize() {
    windowHeight = window.innerHeight ? window.innerHeight : $(window).height();
    windowWidth = window.innerWidth ? window.innerWidth : $(window).width();
    radioGroupStyle();
}
windowSize();
$(window).resize(function () {
    windowSize();
});

function isValid(input) {
    $(input).addClass('valid').removeClass('invalid').attr('data-validity', 'valid');
}

function inValid(input) {
    $(input).addClass('invalid').removeClass('valid').attr('data-validity', 'invalid');
}

function isEmpty(input) {
    if (!$.trim($(input).val())) {
        $(input).removeClass('invalid').removeClass('valid').removeClass('invalid-radio').attr('data-validity', 'null');
    }
}

function radioGroupStyle() {
    $('.group').each(function () {
        if (windowWidth >= 800 && radio.not(':checked')) {
            $(this).addClass('invalid-radio');
            radio.on('change', function () {
                $(this).closest('.group').removeClass('invalid-radio');
            });
        } else if (windowWidth < 800 && radio.not(':checked')) {
            $(this).parent().removeClass('invalid-radio');
            $(this).closest('.field').addClass('invalid-radio');
            radio.on('change', function () {
                $(this).closest('.field').removeClass('invalid-radio');
            });
        }
    });
}

$(document).ready(function () {

    if (!supportsHtml5Validation()) {
        return;
    }
    var timer = 0,
        input = $('input').not('[type=radio]'),
        radio = $('input[type=radio]'),
        select = $('select'),
        notRequired = input.not('[required]'),
        form = $('form');

    input.on('keyup', function () {

        clearTimeout(timer);
        if ($.trim($(this).val()) === '') {
            isEmpty(this);
            return false;
        } else if (!this.checkValidity()) {
            timer = setTimeout(inValid(this), 300);
        } else if (this.checkValidity()) {
            isValid(this);
        }
    });

    select.on('change', function () {
        if (!this.checkValidity()) {
            inValid(this);
        } else {
            isValid(this);
        }
    });

    form.on('submit', function (e) {

        input.add(select).each(function () {
            if (!this.checkValidity()) {
                e.preventDefault();
                inValid(this);
            } else {
                isValid(this);
            }
        });

        radioGroupValidation();

    });

    $('button[type=reset]').on('click', function () {
        console.log('reset clicked');
        $('.group, .field, input, select').each(function () {
            isEmpty(this);
        });
    });

    if (notRequired) {
        notRequired.on('keyup', function () {
            if ($.trim($(this).val()) === '') {
                isEmpty(this);
                return false;
            } else if (!$(this).val().match($(this).attr('pattern'))) {
                notRequired.each(function () {
                    inValid(this);
                });
            } else if ($(this).val().match($(this).attr('pattern'))) {
                notRequired.each(function () {
                    isValid(this);
                });
            }
        });
    }
});

函数和变量的加载顺序问题（范围问题）

0 个答案: