Question

我想单击“上一步”按钮，使进度条后退一步

function progress(){
var totalQuestions = 7;
var currentQuestion = 0;
var $progressbar = $("#progressbar");

$(".option").on("click", function(){
  if (currentQuestion >= totalQuestions){ return; }
  currentQuestion++;
  $progressbar.css("width", Math.round(100 * currentQuestion / totalQuestions) + "%");
});

}

“返回”按钮将我带到先前的问题，但未更改进度栏

Answer 1

如果您在页面上添加一个ID为例如backButton的额外按钮，则可以执行以下操作：

$(".backButton").on("click", function(){
  currentQuestion--;
  $progressbar.css("width", Math.round(100 * currentQuestion / totalQuestions) + "%");
});

因此，您将一个额外的onClickListener添加到另一个按钮上，该按钮控制着相同的进度条，就像您可以将其放在完全相同的函数中一样，并且您在函数中全局声明了变量。

Answer 2

我猜想这可以为类backward的按钮提供帮助：

function progress(){
var totalQuestions = 7;
var currentQuestion = 0;
var FinalCurrentQuestion = 0;
var $progressbar = $("#progressbar");

$(".option").on("click", function(){
  if (currentQuestion >= totalQuestions){ return; }
  currentQuestion++;
  FinalCurrentQuestion = currentQuestion;
  $progressbar.css("width", Math.round(100 * currentQuestion / totalQuestions) + "%");
});

$(".backward").on("click", function(){
  if (FinalCurrentQuestion == currentQuestion) {
  currentQuestion--;
  $progressbar.css("width", Math.round(100 * currentQuestion / totalQuestions) + "%");
  }
});

}

如何使进度条返回上一步，单击返回按钮

2 个答案: