使用全局变量在.each函数中不起作用

Question

这是我正在使用的脚本:

<script type="text/javascript">
    $(document).ready(function () {
        var autoFlip = true;
        $(document).on('click', '.cardFlip', function () {
            $(this).closest('.flip-container').toggleClass('flip');
        });

        $("#auto_flip").change(function () {
            if (autoFlip) {
                autoFlip = false;
            }
            else {
                autoflip = true;
            }
        });

        // only flip the containers given the autoFlip class
        $(".autoFlip").each(function (i) {
            if (autoFlip) {
                var el = $(this);
                setTimeout(function () {
                    setInterval(function () {
                        el.closest('.flip-container').toggleClass('flip');
                    }, 5000);
                }, 500 * i);
            }
        });

    });

</script>

默认情况下,我的仪表板上有4个框,每隔60秒自动翻转显示不同的内容.我正在尝试添加一个按钮,可以为那些希望手动翻转它们的用户关闭此按钮.

但是,设置我的全局autoFlip并false通过a 设置它click #auto_flip不起作用.变量已正确设置为false.但翻转不断发生.知道为什么.each如果更改autoFlip变量不关心？

这是我的按钮,我设置为变量false.

<input id="auto_flip" class="auto_flip" type="checkbox" checked data-on="Auto
Flip On" data-off="Auto Flip Off" data-toggle="toggle" data-onstyle="primary">

Answer 1

您在autoFlip启动计时器时进行测试,而不是在计时器代码运行时进行测试.

    $(".autoFlip").each(function (i) {
        var el = $(this);
        setTimeout(function () {
            setInterval(function () {
                if (autoFlip) {
                    el.closest('.flip-container').toggleClass('flip');
                }, 5000);
            }, 500 * i);
        }
    });

此外,您的切换代码autoFlip可以简化为:

autoFlip = !autoFlip;