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 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;

Answer 2

错字

else {
            autoflip = true;
        }

将其更改为

else {
            autoFlip = true;
        }

使用全局变量在.each函数

2 个答案: