时间戳

首页 > 解决方案 > 进度条上的返回按钮

jquery - 进度条上的返回按钮

问题描述

我一直在尝试使用 BACK & NEXT 按钮创建多步骤内容结构。一切都按预期工作，但后退按钮没有从进度条中删除活动类。任何人都可以看看我的代码和帮助。

$(document).ready(function(){
  //steps ui
  var progressBar = {
  Bar : $('#progress-bar'),
  Reset : function(){

  },
  Next: function(){
    $('#progress-bar li:not(.active):first').addClass('active');
  },
  Back: function(){
    $('#progress-bar li.active:last').removeClass('active');
  }
}

  var current = 1;

    widget      = $(".step");
    btnnext     = $(".next");
    btnback     = $(".back"); 
    btnsubmit   = $(".submit");

    // Init buttons and UI
    widget.not(':eq(0)').hide();
    hideButtons(current);
    setProgress(current);

    // Next button click action
    btnnext.click(function(){
        if(current < widget.length) {           
            widget.show();          
            widget.not(':eq('+(current++)+')').hide();
            setProgress(current); 
            //alert("I was called from btnNext");
        }       
       hideButtons(current); 
    progressBar.Next();
   });

  // Back button click action   
  btnback.click(function(){         
      if(current > 1){
            current = current - 2;
            btnnext.trigger('click');

        }
        hideButtons(current);
    progressBar.Back();
    });     
});

附上下面的codepen链接

编解码器

标签： jqueryhtmlcsstwitter-bootstrap

解决方案

There is a small mistake in your code. When you click on back button, next button clicked is trigger. Please update your btnback click function with following

   $(document).ready(function() {
        //steps ui
        var progressBar = {
            Bar: $('#progress-bar'),
            Reset: function() {

            },
            Next: function() {
                $('#progress-bar li:not(.active):first').addClass('active');
            },
            Back: function() {
                $('#progress-bar li.active:last').removeClass('active');
            }
        }

        var current = 1;

        widget = $(".step");
        btnnext = $(".next");
        btnback = $(".back");
        btnsubmit = $(".submit");

        // Init buttons and UI
        widget.not(':eq(0)').hide();
        hideButtons(current);
        setProgress(current);

        // Next button click action
        btnnext.click(function() {
            if (current < widget.length) {
                widget.show();
                widget.not(':eq(' + (current++) + ')').hide();
                setProgress(current);
                //alert("I was called from btnNext");
            }
            hideButtons(current);
            progressBar.Next();
        });

        // Back button click action     
        btnback.click(function(event) {
            var divShowCount = 0
            if (current > 1) {
                current = current - 1;
                divShowCount = current - 1
            }
            widget.show();
            widget.not(':eq(' + (divShowCount) + ')').hide();
            hideButtons(current);
            progressBar.Back();
        });
    });

    // Change progress bar action
    setProgress = function(currstep) {
        var percent = parseFloat(100 / widget.length) * currstep;
        percent = percent.toFixed();
        $(".progress-bar")
            .css("width", percent + "%")
            .html(percent + "%");
    }


    // Hide buttons according to the current step
    hideButtons = function(current) {
        var limit = parseInt(widget.length);
        $(".action").hide();
        if (current < limit)
            btnnext.show();
        if (current > 1) btnback.show();
        if (current == limit) {
            btnnext.hide();
            btnsubmit.show();
        }
    }

I hope this helps you

推荐阅读