Fatal编程技术网
  • javascript/
  • Javascript 将标记从输入更改为选择时，jQuery代码中断

Javascript 将标记从输入更改为选择时，jQuery代码中断

javascript jquery

Javascript 将标记从输入更改为选择时，jQuery代码中断,javascript,jquery,Javascript,Jquery,我有一个时间表，我使用jQuery自动计算开始和停止时间之间的值，然后根据开始和停止时间的值动态填充其他输入框。在我的老板想把开始和停止时间改为只增加30分钟之前，一切都很顺利，所以早上7:00，早上7:30等等。因为我不知道如何让html标记的时间增加30分钟，所以我只是将输入改为select，保持所有类名和字段名不变，并添加了选项值。表单仍然有效，我在所有我想要的框中得到我的值，并且它也将它们加起来，但是现在这些值加起来不正确。如果在开始时选择上午8:00，在停止时选择下午8:00，则总计为

我有一个时间表，我使用jQuery自动计算开始和停止时间之间的值，然后根据开始和停止时间的值动态填充其他输入框。在我的老板想把开始和停止时间改为只增加30分钟之前，一切都很顺利，所以早上7:00，早上7:30等等。因为我不知道如何让html标记的时间增加30分钟，所以我只是将输入改为select，保持所有类名和字段名不变，并添加了选项值。表单仍然有效，我在所有我想要的框中得到我的值，并且它也将它们加起来，但是现在这些值加起来不正确。如果在开始时选择上午8:00，在停止时选择下午8:00，则总计为24，而不是12。它似乎能工作10个小时左右，然后就崩溃了。我还注意到，从上午10:00到晚上11:00这样的时间总共只有一个小时。 有人能告诉我为什么当这个字段是一个输入时它工作得很好，但现在它是一个选择，它就崩溃了

//Event on change in START or STOP.
$(".start, .stop").on('change', function() {
//Look into $(this) to find the new TR group (row) with the class rowTR.
//This is dynamic and works for all ROWS modified
var start = $(this).parent().parent().find('.start').val().split(':');
var stop = $(this).parent().parent().find('.stop').val().split(':');
var hours1 = parseInt(start[0], 10) || 0;
hours2 = parseInt(stop[0], 10) || 0;
mins1 = parseInt(start[1], 10) || 0;
mins2 = parseInt(stop[1], 10) || 0;
var hours = hours2 - hours1,
    mins = 0;
if (hours < 0) hours = 24 + hours;
if (mins2 >= mins1) {
    mins = mins2 - mins1;
} else {
    mins = (mins2 + 60) - mins1;
    hours--;
}
mins = mins / 60; // take percentage in 60
hours += mins;
hours = hours.toFixed(2);
$(this).parent().parent().find('.hours').val(hours);
$(this).parent().parent().find('.dailyTotalGeneric').val(hours);
//Calculate all the daily total by row.
calculateWeeklyTotal()
});
$(".lunch").on('change', function() {
//get the value
var num = parseFloat($(this).parent().parent().find('.dailyTotalGeneric').val());
//If is checked, the lunch will be discount from hours.
if ($(this).is(':checked')) {
    //Use newNum with discount of LUNCH
    $(this).parent().parent().find('.dailyTotalGeneric').val(num - 0.5);
} else {
    //else, add 0.5 to hours
    $(this).parent().parent().find('.dailyTotalGeneric').val(num + 0.5);
}
//Calculate the daily total again
calculateWeeklyTotal()
});

function calculateWeeklyTotal() {
var total = 0;
$('.dailyTotalGeneric').each(function() {
    total += ($(this).val() && !isNaN($(this).val())) ? parseFloat ($(this).val()) : parseFloat(0);
});
//Only 2 decimals
$('#total').val(total.toFixed(2))
}
更改函数的顶部，使其用空格分隔值，然后标识AM或PM。对于PM，它在一小时内增加12小时

var startParts = $(this).parent().parent().find('.start').val().split(' ');
var start = startParts[0];
var startType = startParts[1];
var stopParts = $(this).parent().parent().find('.stop').val().split(' ');
var stop = stopParts[0];
var stopType = stopParts[1];

var hours1 = parseInt(start[0], 10) || 0;
hours2 = parseInt(stop[0], 10) || 0;
mins1 = parseInt(start[1], 10) || 0;
mins2 = parseInt(stop[1], 10) || 0;

if (startType == 'PM') {
  hours1+= 12;
}
if (stopType == 'PM') {
  hours2+= 12;
}
更改函数的顶部，使其用空格分隔值，然后标识AM或PM。对于PM，它在一小时内增加12小时

var startParts = $(this).parent().parent().find('.start').val().split(' ');
var start = startParts[0];
var startType = startParts[1];
var stopParts = $(this).parent().parent().find('.stop').val().split(' ');
var stop = stopParts[0];
var stopType = stopParts[1];

var hours1 = parseInt(start[0], 10) || 0;
hours2 = parseInt(stop[0], 10) || 0;
mins1 = parseInt(start[1], 10) || 0;
mins2 = parseInt(stop[1], 10) || 0;

if (startType == 'PM') {
  hours1+= 12;
}
if (stopType == 'PM') {
  hours2+= 12;
}
将选项值更改为24小时格式

<option value="00:00">12:00 AM</option>
<option value="00:30">12:30 AM</option>
<option value="01:00">1:00 AM</option>
<option value="01:30">1:30 AM</option>
...
<option value="22:30">10:30 PM</option>
<option value="23:00">11:00 PM</option>
<option value="23:30">11:30 PM</option>
然后更新change函数

$(".start, .stop").on('change', function() {
  //Look into $(this) to find the new TR group (row) with the class rowTR.
  //This is dynamic and works for all ROWS modified
  var start = $(this).parent().parent().find('.start').val().split(':');
  var stop = $(this).parent().parent().find('.stop').val().split(':');

  var hours1 = parseInt(start[0], 10) || 0;
  var hours2 = parseInt(stop[0], 10) || 0;
  var mins1 = parseInt(start[1], 10) || 0;
  var mins2 = parseInt(stop[1], 10) || 0;

  var startDate = new Date(0, 0, 0, hours1, mins1, 0);
  var endDate = new Date(0, 0, 0, hours2, mins2, 0);

  var diff = 0
  if (startDate < endDate) {
    diff = (endDate - startDate) / 36e5
  }

  //Apply changes dynamically, searching the main TR and looking into this to change the values of hours/dailyTotal inputs
  $(this).parent().parent().find('.hours').val(diff);
  $(this).parent().parent().find('.dailyTotalGeneric').val(diff);

  //Calculate all the daily total by row.
  calculateWeeklyTotal()
});
将选项值更改为24小时格式

<option value="00:00">12:00 AM</option>
<option value="00:30">12:30 AM</option>
<option value="01:00">1:00 AM</option>
<option value="01:30">1:30 AM</option>
...
<option value="22:30">10:30 PM</option>
<option value="23:00">11:00 PM</option>
<option value="23:30">11:30 PM</option>
然后更新change函数

$(".start, .stop").on('change', function() {
  //Look into $(this) to find the new TR group (row) with the class rowTR.
  //This is dynamic and works for all ROWS modified
  var start = $(this).parent().parent().find('.start').val().split(':');
  var stop = $(this).parent().parent().find('.stop').val().split(':');

  var hours1 = parseInt(start[0], 10) || 0;
  var hours2 = parseInt(stop[0], 10) || 0;
  var mins1 = parseInt(start[1], 10) || 0;
  var mins2 = parseInt(stop[1], 10) || 0;

  var startDate = new Date(0, 0, 0, hours1, mins1, 0);
  var endDate = new Date(0, 0, 0, hours2, mins2, 0);

  var diff = 0
  if (startDate < endDate) {
    diff = (endDate - startDate) / 36e5
  }

  //Apply changes dynamically, searching the main TR and looking into this to change the values of hours/dailyTotal inputs
  $(this).parent().parent().find('.hours').val(diff);
  $(this).parent().parent().find('.dailyTotalGeneric').val(diff);

  //Calculate all the daily total by row.
  calculateWeeklyTotal()
});
在读了你在Chris Cousins的回答中给我的便条后，我做了一些研究，发现让时间标签以半小时为单位显示一点都不困难。只需使用步骤属性，即可：

在读了你在Chris Cousins的回答中给我的便条后，我做了一些研究，发现让时间标签以半小时为单位显示一点都不困难。只需使用步骤属性，即可：

或者，您是否可以通过将值更改为0、.5、1、1.5等来避免所有这些问题？实际上，如果要重新设计，这些值只应表示从午夜开始的分钟数。30、60、90等等。这样数学就很简单了，如果你想改成每15分钟一次，值就需要改变，而不是函数中的数学。分钟数还是小时数？可能分钟比小时更容易更改，但在显示总计时必须将它们转换为小时，这并不困难。无论是哪种方式，在我看来，从OP的帖子来看，他正在重新设计，所以考虑摆脱字符串并敲打所有解析代码可能是好的。@ BoBrdes的重新设计是绝对有序的，因为这从来都不是原来的样子。多亏了Pavittar Gills下面的部分答案，我才知道它可以工作，但我更愿意的是根本不使用select，而是找到一种在html5中使用时间标签的方法，并将其修改为仅显示半小时增量。我现在不认为这是可能的，所以我可能不得不使用jQuery timepicker之类的工具。@jason事实证明，你可以很容易地做到这一点。看看我的答案。或者，你不能通过将值更改为0、.5、1、1.5等来避免所有这些吗？实际上是为了重新设计，这些值应该只是表示从午夜开始的分钟数。30、60、90等等。这样数学就很简单了，如果你想改成每15分钟一次，值就需要改变，而不是函数中的数学。分钟数还是小时数？可能分钟比小时更容易更改，但在显示总计时必须将它们转换为小时，这并不困难。无论是哪种方式，在我看来，从OP的帖子来看，他正在重新设计，所以考虑摆脱字符串并敲打所有解析代码可能是好的。@ BoBrdes的重新设计是绝对有序的，因为这从来都不是原来的样子。多亏了Pavittar Gills下面的部分答案，我才知道它可以工作，但我更愿意的是根本不使用select，而是找到一种在html5中使用时间标签的方法，并将其修改为仅显示半小时增量。我现在不认为这是可能的，所以我可能不得不使用jQuery timepicker之类的工具。@jason事实证明，你可以很容易地做到这一点。看到我的答案了。我只需更改选项值，从午夜00:00到23:00到晚上11:30，就可以让它工作，它就像一个符咒。根本不需要更改任何jQuery代码。谢谢你，我有一个想法，它可能需要改变，但被困在代码必须改变，而事实上它不需要。我能够使它的工作只是改变选项值从午夜00:00至23:00至11:30下午，它的工作就像一个魅力。根本不需要更改任何jQuery代码。谢谢你，不过我有一个想法
它可能需要改成那样，但却被困在代码上，而实际上它不需要改。谢谢鲍勃，我会试试看会发生什么。我立刻注意到它在Edge中不起作用，但我会看看我能做些什么。@Jason，这很有趣。文档特别指出Edge支持step属性，我之所以这样说是因为我使用Edge运行提供的代码段，并且没有任何更改。它仍然增加了1分钟而不是30分钟。@Jason毫无疑问。但是如果医生明确表示支持，我不会放弃。谢谢鲍勃，我会试试看会发生什么。我立刻注意到它在Edge中不起作用，但我会看看我能做些什么。@Jason，这很有趣。文档特别指出Edge支持step属性，我之所以这样说是因为我使用Edge运行提供的代码段，并且没有任何更改。它仍然增加了1分钟而不是30分钟。@Jason毫无疑问。但如果医生明确表示支持，我不会放弃。