Question

我想要的是，在进度条到达100%后，它会自动指向Profile form，而不会点击我制作的链接。

我的问题是我不知道如何让它重定向到个人资料表单而不会在进度达到100％后点击链接。如果再次按下主页链接，进度条将再次重置。

Answer 1

要重定向到个人资料表单，您可以在正确的选择器上trigger click，如：

$(".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');
    });
});

查看您的分叉 JSFIDDLE

我的进度条达到100％后如何自动切换表格

1 个答案: