我想我需要javascript中的动态变量来实现这一点？

我试图在这里使用秒表：但是对于页面上的许多计数器，它们是通过php循环动态创建的。 例如：

<button type="button" class="btn" id="bn1" data-bid="n1">Start</button>
<br><br>
<div id=n1></div>
<br><br>
<button type="button" class="btn" id="bn2" data-bid="n2">Start</button>
<br><br>
<div id=n2></div>

开始






开始

使用jquery，我试图创建两个简单的函数。一个用于启动每个单击的计时器，另一个用于停止它

<script src="http://code.jquery.com/jquery-2.2.0.min.js"></script>
<script language=javascript>
var vars = {};
var bid;
var h = 0;
var m = 0;
var s = 0;

$('[class^=btn]').on('click', function() {
  var pause = $(this).text() === 'Stop';
  $(this).text(pause ? 'Start' : 'Stop');
  bid = $(this).attr('data-bid');
  return (this.timvar ^= 1) ? startimer(bid) : stop(bid);
});


function stop(bid) {
  clearTimeout(['tm' + bid]);
}

function startimer(bid) {
  //vars['tm' + bid] = setInterval('disp('+bid+')',1000);
  vars['tm' + bid] = setInterval(function() {
    disp(bid)
  }, 1000);
}

function disp(bid) {
  //alert(bid);
  // Format the output by adding 0 if it is single digit //
  if (s < 10) {
    var s1 = '0' + s;
  } else {
    var s1 = s;
  }
  if (m < 10) {
    var m1 = '0' + m;
  } else {
    var m1 = m;
  }
  if (h < 10) {
    var h1 = '0' + h;
  } else {
    var h1 = h;
  }
  // Display the output //
  str = h1 + ':' + m1 + ':' + s1;
  document.getElementById(bid).innerHTML = str;
  // Calculate the stop watch // 
  if (s < 59) {
    s = s + 1;
  } else {
    s = 0;
    m = m + 1;
    if (m == 60) {
      m = 0;
      h = h + 1;
    } // end if  m ==60
  } // end if else s < 59
  // end of calculation for next display
}
</script>

var vars={}；
var投标；
var h=0；
var m=0；
var s=0；
$（'[class^=btn]'）。在（'click'，function（）上{
var pause=$（this.text（）='Stop'；
$（this）.text（暂停？'Start'：'Stop'）；
bid=$（this.attr（'data-bid'）；
返回（this.timvar^=1）？开始计时器（bid）：停止（bid）；
});
功能停止（投标）{
clearTimeout（['tm'+bid]）；
}
功能启动计时器（bid）{
//vars['tm'+bid]=setInterval（'disp（'+bid+'），1000）；
vars['tm'+bid]=setInterval（函数（）{
调度（投标）
}, 1000);
}
功能显示（投标）{
//警报（投标）；
//如果输出是个位数，则通过添加0格式化输出//
如果（s<10）{
变量s1='0'+s；
}否则{
var s1=s；
}
如果（m<10）{
变量m1='0'+m；
}否则{
var m1=m；
}
if（h<10）{
变量h1='0'+h；
}否则{
var h1=h；
}
//显示输出//
str=h1+'：'+m1+'：'+s1；
document.getElementById（bid）.innerHTML=str；
//计算秒表
如果（s<59）{
s=s+1；
}否则{
s=0；
m=m+1；
如果（m==60）{
m=0；
h=h+1；
}//如果m==60，则结束
}//如果s<59，则结束
//下一次显示的计算结束
}

不知何故，我必须能够为每个按钮多次执行这2个函数，这将使用一个动态“tm”变量，用定时器更新n1和n2..（等）div中的文本。然后当用户按下stop键时，可以停止特定的tm变量。 但是…当涉及到动态变量以及如何在javascript函数之间正确传递它们时，我有点不知所措…我甚至不确定是否有更简单的方法来实现这一点…我不知道在google中搜索它的合适术语是什么。有什么建议吗？我做错了什么？

---

-谢谢

我不完全确定您在问什么，但您不应该有多个元素具有相同的ID。请使用类<代码>开始。另外，查看

setInterval

重复调用函数。我使用相同的id来执行更改按钮文本的js，每个div都有唯一的数据bid。document.getElementById（bid）.innerHTML=str；是错误的，我知道…但我还没有到达那个“地方”来修复它…因为我甚至无法在该函数中获得正确的bid var。我在startimer函数中使用setInterval…问题是tm必须是动态的（每个按钮一个），变量bid不能传递给disp（）函数ID必须是唯一的！您的按钮共享相同的id，这将从一开始就打破这一切您可以对一个类执行完全相同的操作。ID:

$（'#btn'）.text（'text'）类：
$（'.btn'）.text（'text'）另外，@Michael所说的是正确的，你真的需要唯一的ID。如果您只需要更改一个按钮的文本，如示例中所示，请使用ID或数据bid attr。您甚至可以使用onClick而不是data bid来使用
event.target.id
event.target.id
返回通过onClick调用函数的DOM元素的id。好的，我再次更改了代码以反映类的更改…它现在应该可以工作了，但没有。startimer函数未在disp（）中传递var bid