Javascript jquery中的id不'；行不通

我有N个输入，对于每个输入，我有两个按钮：使用

class='starttimer'

启动“和使用

class='endtime'

停止”。当我按start和stop时，这两次单击之间的差异将保存在输入中（以秒为单位）

---

这是可行的，但是当我点击两次开始按钮时，它就不能正常工作了。如何根据ID进行选择<您可以使用jquery的通配符选择技术来匹配ID以所需文本开头的元素

$('[id^=start_time_]').click(function(e) {
  //put your code here
});

---

使用按钮的

id

实际上与问题无关。问题是，您只能对多个按钮使用一组变量。因此，如果您两次单击“开始”按钮，或者单击“开始”按钮和“结束”按钮，您将有一些奇怪的行为

要解决此问题，最好使用

data

属性将值存储在元素本身中，然后使用DOM遍历方法而不是使用unique

id

属性将它们彼此关联起来。请尝试以下操作：

$（'.starttimer'）。单击（函数（e）{
e、 预防默认值（）；
$（this.data（'start'，new Date（）.getTime（））；
});
$（'.endtimer'）。单击（函数（e）{
e、 预防默认值（）；
var$start=$（this.prev（'.starttimer'）；
var start=$start.data（'start'）；
如果（启动）{
让结束=新日期（）；
让diff=Math.round（（end.getTime（）-start）/1000）；
$（this）.next（'.output'）.val（diff）；
$start.data（'start'，null）；
}
})；

.starttimer{
颜色：黄色；
背景颜色：绿色；
}
.结束计时器{
颜色：黑色；
背景色：红色；
}

开始
停止
开始
停止

您可以尝试以下方法：

设t0=0；
$（'[id^=start_time_u]'）。单击（函数（e）{
e、 预防默认值（）；
让时间=新日期（）；
t0=时间。getTime（）；
$（'[id^=end_time_]'）。removeAttr（'disabled'）；
返回false；
});
$（'[id^=end_time_]'）。单击（函数（e）{
e、 预防默认值（）；
让时间=新日期（）；
设t1=Math.round（（time.getTime（）-t0）/1000）；
$（“#”+$（this.data（'target'））.val（t1）；
返回false；
})；

开始
停止

如果您想创建多个计时器，那么我认为您使用id的方法是错误的。虽然很好，但您使id具有唯一性。似乎您使用php实现了这一点，这使得很难知道客户端的id（javascript）是什么。但是您也可以在没有id的情况下实现这一点

我使用了一个div作为按钮和输入的包装器，这些按钮和输入属于彼此。我使用了一个隐藏的输入来存储starttime，但是您也可以使用数据属性

使用下面的代码片段，您可以创建多个计时器，而无需担心按下“开始”按钮两次。即使您没有将“开始”按钮设置为“禁用”，它也只会重置属于该按钮的计时器

$（文档）.ready（函数（）{
$（'.starttimer'）。单击（函数（e）{
e、 预防默认值（）；
var wrapper=$（this.parents（'.timerWrapper'）；
var currTime=新日期（）；
$（this.prop（'disabled'，true）；
wrapper.find（'.endtimer'）.prop（'disabled'，false）；
wrapper.find（'.time'）.val（''）；
find（'.starttime'）.val（currTime.getTime（））；
返回false；
});
$（'.endtimer'）。单击（函数（e）{
e、 预防默认值（）；
var wrapper=$（this.parents（'.timerWrapper'）；
var currTime=新日期（）；
var startTime=wrapper.find（'.startTime'）.val（）；
$（this.prop（'disabled'，true）；
wrapper.find（'.starttimer'）.prop（'disabled'，false）；
wrapper.find（'.time'）.val（（currTime.getTime（）-startTime）/1000）；
返回false；
});
})；

.starttime{
显示：无；
}

开始
停止
开始
停止

您是如何在PHP端生成输入字段的，您可以在JS中使用

+

操作符为每个inputString串联添加一个数字id:

start\u time.+somethingUnique

，尽管我看不出这对您的问题有任何影响。保留现有的类选择器，而是存储一个计时器值数组会更有意义。如果你可以将HTML添加到问题中，我可以给你一个例子来说明我的意思，或者可能是另一个选择。不确定它是否对你有帮助，因为你不清楚你想用id做什么。但是你可以在事件处理程序中用

$（this）

获得当前单击的按钮。另外，您的选择器与按钮的类不匹配。我希望jquery在id上工作。但我不知道如何在$（“#here”）中获取id。谢谢您提供的信息，但这并不能解决我的问题。

$('.start_time').click(function(e) {
  e.preventDefault();
  let time = new Date();
  t0 = time.getTime();
  return false;
});

$('.end_time').click(function(e) {
  e.preventDefault();
  let time = new Date();
  let t1 = Math.round((time.getTime() - t0)/1000);
  $("#" + $(this).data('target')).val(t1);
  return false;
});

$('[id^=start_time_]').click(function(e) {
  //put your code here
});