javascript - jquery 中的 id 不起作用

Question

我有 N 个输入，对于每个输入，我有两个按钮:使用 class='starttimer' 的“开始”按钮和使用 class='endtime' 的“停止”按钮。当我按下开始和停止时，这两次点击之间的差异将保存在输入中(以秒为单位)。

<button style='color:yellow; background-color:green' class='buton starttimer' data-target='".$somethingUnique."' id='start_time_".$somethingUnique."'>START</button>
<button style='color:black; background-color:red' class='buton endtimer' data-target='".$somethingUnique."' disabled id='end_time_".$somethingUnique."'>STOP</button>

我有有效但不正确的 jQuery 代码:

$('.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_".$somethingUnique.""?

Answer 1

使用按钮的 id 与问题无关。问题是您只对多个按钮使用一组变量。因此，如果你点击“开始”按钮两次，或者在现场的“开始”和另一个的“结束”，你将会有一些奇怪的行为。

要解决此问题，最好使用 data 属性将值存储在元素本身中，然后使用 DOM 遍历方法而不是唯一的 id 将它们相互关联> 属性。试试这个:

$('.starttimer').click(function(e) {
  e.preventDefault();
  $(this).data('start', new Date().getTime());
});

$('.endtimer').click(function(e) {
  e.preventDefault();
  var $start = $(this).prev('.starttimer');
  var start = $start.data('start');
  if (start) {
    let end = new Date();
    let diff = Math.round((end.getTime() - start) / 1000);
    $(this).next('.output').val(diff);
    $start.data('start', null);
  }
});

.starttimer {
  color: yellow;
  background-color: green;
}

.endtimer {
  color: black;
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="timer">
  <button class="buton starttimer">START</button>
  <button class="buton endtimer">STOP</button>
  <input class="output" readonly="true">
</div>
<div class="timer">
  <button class="buton starttimer">START</button>
  <button class="buton endtimer">STOP</button>
  <input class="output" readonly="true">
</div>

另请注意，我将 CSS 规则放在外部样式表中，因为 HTML 中的内联样式是不好的做法，应尽可能避免。