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中的内联样式是一种不好的做法，应尽可能避免。

Answer 2

您可以将jquery的通配符选择技术与具有以所需文本开头的ID的match元素一起使用。

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

Answer 3

您可以尝试以下方法：

let t0 = 0;
$('[id^=start_time_]').click(function(e) {
	e.preventDefault();
	let time = new Date();
	t0 = time.getTime();
	$('[id^=end_time_]').removeAttr('disabled');
	return false;
});

$('[id^=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;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<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>
	
  
<input id="somethingUnique" type="text">

Answer 4

如果您希望能够创建多个计时器，那么我认为您使用ID的方法是错误的。尽管这很好，但您还是使ID唯一。看来您是用php做到的，这使得更难知道客户端的ID是什么（在javascript中）。但是您也可以在没有id的情况下执行此操作。

我使用div作为彼此属于的按钮和输入的包装。我使用了隐藏的输入来存储开始时间，但是您也可以使用data属性。

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

$(document).ready(function() {
  $('.starttimer').click(function(e) {
    e.preventDefault();
    var wrapper = $(this).parents('.timerWrapper');
    var currTime = new Date();
    
    $(this).prop('disabled', true);
    wrapper.find('.endtimer').prop('disabled', false);
    
    wrapper.find('.time').val('');

    wrapper.find('.starttime').val(currTime.getTime());
    return false;
  });

  $('.endtimer').click(function(e) {
    e.preventDefault();
    var wrapper = $(this).parents('.timerWrapper');
    var currTime = new Date();
    var startTime = wrapper.find('.starttime').val();
    
    $(this).prop('disabled', true);
    wrapper.find('.starttimer').prop('disabled', false);

    wrapper.find('.time').val((currTime.getTime() - startTime) / 1000);
    return false;
  });
});

.starttime {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="timerWrapper">
  <input class="starttime" />
  <input class="time" />
  <button class="starttimer">START</button>
  <button class="endtimer" disabled>STOP</button>
</div>

<div class="timerWrapper">
  <input class="starttime" />
  <input class="time" />
  <button class="starttimer">START</button>
  <button class="endtimer" disabled>STOP</button>
</div>

jQuery中的ID不起作用

4 个答案: