在当前活动元素中开始倒计时

Question

我有引导多步骤表格。每一步都有 <span class="timer"></span>。我的问题是计时器仅在第一步有效。我不知道如何在另一个步骤（字段集标记）上开始倒计时。定时器代码：

  var counter = seconds;

  var interval = setInterval(() => {

   document.getElementById('timer').innerHTML = "("+counter + " seconds left)" ;

    counter--;

    if(counter < 0 ){

      clearInterval(interval);

    };

  }, 1000);

};

我也试过这个：

        $("#nextStep").click(function() {

            startCountdown(60);

        });

Answer 1

document.getElementById('timer')总是返回在 DOM 中找到的第一个项目！您应该使用不同的 id ( #timer-1,#timer-2等) 并在您完成每个步骤时有条件地选择它们。您可以startCountdown像这样扩充您的方法：function startCountDown (selectorId, seconds) {&nbsp; var counter = seconds;&nbsp; var interval = setInterval(() => {&nbsp; &nbsp;document.getElementById(selectorId).innerHTML = "("+counter + " seconds left)" ;&nbsp; &nbsp; counter--;&nbsp; &nbsp; if(counter < 0 ){&nbsp; &nbsp; &nbsp; clearInterval(interval);&nbsp; &nbsp; };&nbsp; }, 1000);};let idCounter = 0$("#nextStep").click(function() {&nbsp; &nbsp;// generate new counter id based on your progression&nbsp; &nbsp;// this assumes your ids are timer-0, timer-1, etc&nbsp; &nbsp;startCountdown(60, 'timer-' + idCounter);&nbsp; &nbsp;idCounter++});更好的方法是使用类，getElementsByClassName()然后简单地遍历数组：function startCountDown (selectorId, timerCounter, seconds) {&nbsp; var counter = seconds;&nbsp; var interval = setInterval(() => {&nbsp; &nbsp;// getElementsByClassName returns a DOMNodeList of matched items that you can use indexes to access&nbsp; &nbsp;document.getElementByClassName(selectorId)[timerCounter].innerHTML = "("+counter + " seconds left)" ;&nbsp; &nbsp; counter--;&nbsp; &nbsp; if(counter < 0 ){&nbsp; &nbsp; &nbsp; clearInterval(interval);&nbsp; &nbsp; };&nbsp; }, 1000);};let timerCounter = 0$("#nextStep").click(function() {&nbsp; &nbsp;startCountdown(60, 'timer', timerCounter);&nbsp; &nbsp;timerCounter++});

Answer 2

您需要更改 <span class="timer"></span>为 <span id="timer"></span>. 最后 };in 给我一个错误，所以我用var counter = seconds;&nbsp; var interval = setInterval(() => {&nbsp; &nbsp;document.getElementById('timer').innerHTML = "("+counter + " seconds left)" ;&nbsp; &nbsp; counter--;&nbsp; &nbsp; if(counter < 0 ){&nbsp; &nbsp; &nbsp; clearInterval(interval);&nbsp; &nbsp; };&nbsp; }, 1000);代替var counter = seconds;&nbsp; var interval = setInterval(() => {&nbsp; &nbsp;document.getElementById('timer').innerHTML = "("+counter + " seconds left)" ;&nbsp; &nbsp; counter--;&nbsp; &nbsp; if(counter < 0 ){&nbsp; &nbsp; &nbsp; clearInterval(interval);&nbsp; &nbsp; };&nbsp; }, 1000);};你可以做var counter = seconds;function startInterval() {&nbsp; &nbsp;var interval = setInterval(() => {&nbsp; &nbsp;document.getElementById('timer').innerHTML = "("+counter + " seconds left)" ;&nbsp; &nbsp;counter--;&nbsp; &nbsp;if(counter < 0 ){&nbsp; &nbsp; &nbsp;clearInterval(interval);&nbsp; &nbsp;};&nbsp; }, 1000);}并用于 startInterval()启动计时器。如果你需要在计时器秒数结束时做某事，你可以做var counter = seconds;function startInterval() {&nbsp; &nbsp;var interval = setInterval(() => {&nbsp; &nbsp;document.getElementById('timer').innerHTML = "("+counter + " seconds left)" ;&nbsp; &nbsp;counter--;&nbsp; &nbsp;if(counter < 0 ){&nbsp; &nbsp; &nbsp;clearInterval(interval);&nbsp; &nbsp; &nbsp;var timerOver = true;&nbsp; &nbsp;};&nbsp; }, 1000);};