javascript - 如何在我的进度条达到 100% 后自动切换表单

Question

我想做的是在进度条达到 100% 后，它会自动定向到 Profile form，而无需单击 iv 创建的链接。

我的问题是我不知道如何在进度达到 100% 后不点击链接就重定向到配置文件表单。如果再次按下主页链接，进度条会再次重置。

当前输出:http://jsfiddle.net/GZSH6/71/

Answer 1

要重定向到配置文件表单，您可以触发 单击 正确的选择器，例如:

$(".show-page[data-page=Profile]").trigger("click");

要重置主页，我建议您将 setInterval() 移动到一个外部函数中，您可以在单击 Home 链接时调用该函数

if (pageToShow == "Home") {
    // reset progress var
    value = 0;
    $('.bar').width(0);
    $('.progress').addClass('active');
    progressBar();
} else {
    clearInterval(progress);
};

完整代码

// 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 == "Home") {
            // 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');
    });
});

查看您的 fork JSFIDDLE