Question

如果我点击进度条的链接，然后在进度条达到100％后重定向到porgressbar，我想要运行Profile form。我使用javascript show和hide form制作单页网站。

我的问题是当程序启动时，即使我在Home form并且它会自动重定向到个人资料表单，也会启动进度条。

当前输出：

var value = 0, progress;

//progress bar script
function progressBar() {
    progress = setInterval(function () {
        var $bar = $('.bar');
        if (value >= 100) {
            clearInterval(progress);
            $('.progress').removeClass('active');
            // go to profile after progress bar reaches 100%
            $(".show-page[data-page=Profile]").trigger("click");
        } else {
            value += 10;
            $bar.width(value * 4);
        }
        $bar.text(value + "%");
    }, 800);
};

Answer 1

这是因为您在$（document）.ready回调上调用了progressBar函数，即使起始页不是进度条页面。因此，无论进度条是否实际显示，该函数都会执行应该执行的操作。

删除它应该使代码按预期工作。 http://jsfiddle.net/6VrXD/27/

// vars 
var value = 0, progress;

//progress bar script
function progressBar() {
    progress = setInterval(function () {
        var $bar = $('.bar');
        if (value >= 100) {
            clearInterval(progress);
            $('.progress').removeClass('active');
            // go to profile after progress bar reaches 100%
            $(".show-page[data-page=Profile]").trigger("click");
        } else {
            value += 10;
            $bar.width(value * 4);
        }
        $bar.text(value + "%");
    }, 800);
};
//for my show and hide form script
$(document).ready(function () {
    //progressBar();
    if (typeof (Storage) !== "undefined" && sessionStorage.getItem('pageToShow')) {
        var pageToShow = sessionStorage.getItem('pageToShow');
        $('.page').addClass('hide');
        $('.' + pageToShow).removeClass('hide');
    };
    $('.show-page').click(function () {
        var pageToShow = $(this).data('page');
        if (pageToShow == "progBar") {
            // reset progress var
            value = 0;
            $('.bar').width(0);
            $('.progress').addClass('active');
            progressBar();
        } else {
            clearInterval(progress);
        };
        $('.page').addClass('hide');
        $('.' + pageToShow).removeClass('hide');
        if (typeof (Storage) !== "undefined") {
            sessionStorage.setItem('pageToShow', pageToShow);
        };
    });
    $('.modal-btn').click(function () {
        $('.modal').modal('hide');
    });
});

如何在不设置setInterval的情况下激活我的进度条

1 个答案: