时间戳

首页 > 解决方案 > 使用Javascript从右到左滚动进度条

javascript - 使用Javascript从右到左滚动进度条

问题描述

所以我有这个从左到右工作正常的进度条。虽然我试图让它从右到左工作。我尝试将最后一个属性设为父属性，然后遍历回来，但它不起作用。

$(document).ready(function(){
  
  var current_fs, next_fs, previous_fs; //fieldsets
  var opacity;
  var current = 1;
  var steps = $("fieldset").length;
  
  setProgressBar(current);
  
  $(".next").click(function(){
  
  current_fs = $(this).parent();
  next_fs = $(this).parent().next();
  // var next_fs = $("#progressbar li:last").prev("li")


  
  //Add Class Active
  $("#progressbar li").eq($("fieldset").index(next_fs)).addClass("active");
  
  //show the next fieldset
  next_fs.show();
  //hide the current fieldset with style
  current_fs.animate({opacity: 0}, {
  step: function(now) {
  // for making fielset appear animation
  opacity = 1 - now;
  
  current_fs.css({
  'display': 'none',
  'position': 'relative'
  });
  next_fs.css({'opacity': opacity});
  },
  duration: 500
  });
  setProgressBar(++current);
  });


  

  $(".previous").click(function(){
  
  current_fs = $(this).parent();
  previous_fs = $(this).parent().prev();
  
  //Remove class active
  // $("#progressbar li").eq($("fieldset").index(current_fs)).removeClass("active");
  $("#progressbar li").eq($("fieldset").index(current_fs)).removeClass("active");

  
  //show the previous fieldset
  previous_fs.show();
  
  //hide the current fieldset with style
  current_fs.animate({opacity: 0}, {
  step: function(now) {
  // for making fielset appear animation
  opacity = 1 - now;
  
  current_fs.css({
  'display': 'none',
  'position': 'relative'
  });
  previous_fs.css({'opacity': opacity});
  },
  duration: 500
  });
  setProgressBar(--current);
  });
  
  function setProgressBar(curStep){
  var percent = parseFloat(100 / steps) * curStep;
  percent = percent.toFixed();
  $(".progress-bar")
  .css("width",percent+"%")
  }
  
  $(".submit").click(function(){
  return false;
  })
  
  });

以上是我正在使用的脚本，它不是从 RTL = 1 2 3 4 开始，而是转到 RTL 1 3 2 并停止并且没有达到四个

我还附上了所有代码的小提琴 https://jsfiddle.net/s327e1uo/1/

谢谢

标签： javascripthtmljquerycss

解决方案

事实证明，我所要做的就是保持 JS 原样，并使其浮动：就在 css 中。在 (#ul li)

希望对任何人都有帮助

推荐阅读