JavaScript中的循环更改侦听和计数循环

编辑20.01.2020--新问题

问题/操作原理：

我有表格，分为X行和Y列。在创建表时，使用ASP.NET Core的Razor语法

在表中，我必须用type=“time”（max 23:59）建立一个数学方程，给出两个输入的差值，并将此差值快速写入另一个输入

我很早就开始计算了：

注:

1.这引用了下面的html代码

  var elements_s = document.getElementsByClassName("forUser1");
  var elements_e = document.getElementsByClassName("forUser2");


 for (var i = 0; i < elements_s.length; i++) {
        elements_s[i].addEventListener("change", function (e) {
            document.getElementById("actual_1").value = diff_1();
                           // (---- few lines code later)
            document.getElementById("actual_31").value = diff_31();
        });
    }


 for (var i = 0; i < elements_e.length; i++) {
        elements_e[i].addEventListener("change", function (e) {
            document.getElementById("actual_1").value = diff_1();
                          //  (---- few lines code later)
            document.getElementById("actual_31").value = diff_31();
        });
    }

// I have these diff functions from diff_1 to diff_31

  function diff_1() {
        start = document.getElementById("start_1").value;
        end = document.getElementById("end_1").value;

        start = start.split(":");
        end = end.split(":");
        var startDate = new Date(0, 0, 0, start[0], start[1], 0);
        var endDate = new Date(0, 0, 0, end[0], end[1], 0);
        var diff = endDate.getTime() - startDate.getTime();
        var hours = Math.floor(diff / 1000 / 60 / 60);
        diff -= hours * 1000 * 60 * 60;
        var minutes = Math.floor(diff / 1000 / 60);
        return (hours < 9 ? "0" : "") + hours + ":" + (minutes < 9 ? "0" : "") + minutes;
   }

var elements\u s=document.getElementsByClassName（“forUser1”）；
var elements_e=document.getElementsByClassName（“forUser2”）；
对于（变量i=0；i

其中一个改进了它的答案

此代码仅在输入位于表中的第一个位置且结果输入位于它们旁边时才起作用

这对我来说不起作用

功能差异（开始、结束）{
start=start.split（“：”）；
end=end.split（“：”）；
const startDate=新日期（0,0,0，开始[0]，开始[1]，0）；
const endDate=新日期（0,0,0，end[0]，end[1]，0）；
让diff=endDate.getTime（）-startDate.getTime（）；
恒时=数学楼层（差异/1000/60/60）；
差异-=小时*1000*60*60；
常数分钟=数学楼层（差异/1000/60）；
返回（小时<9？“0”：“）+小时+”：“+（分钟<9？“0”：“）+分钟；
}
document.querySelector（'table'）。addEventListener（'change'，函数（e）{
const classList=e.target.classList
if（classList.contains（'start'）| | classList.contains（'end'））{
//检索相关的输入
const tr=e.target.parentNode.parentNode
常量[开始、结束、实际]=[…tr.querySelectorAll（'input'）]
常量值=diff（start.value，end.value）
实际值=实际值
}
})

---

创建元素数组

var elems = document.querySelectorAll(selectors);

迭代并记录每个项目

for (var i = 0, total = elems.length; i < total; i++) {
  var item = elems[i];
  console.log('item', item)
}

for（var i=0，total=elems.length；i

假设您的原始示例代码是正确的，也就是说，您希望使用id为

start\ux

和

end\ux

的输入计算差异（

x

是一些数字），请注意，只有这些输入分别具有class

start

和

end

要特别选择它们，可以使用css选择器

'.start、.end、.actual'

（或最终

'input.start、input.end、input.actual'

）

您的diff应该只接受两个输入节点（甚至两个字符串，这样感觉更好，因为您可以在不必关心DOM的情况下测试它）

使用已对输入进行分组的DOM：

[...document.querySelectorAll('.start,.end')].addEventListener('change', function (e) {
  //retrieve the associated inputs
  const tr = e.target.parentNode.parentNode
  const [start, end, actual] = [...tr.querySelectorAll('input')]
})

不要将事件绑定到每个输入，而是将其委托给表

document.querySelector('table').addEventListener('change', function(e) {
  const classList = e.target.classList
  if (classList.contains('start') || classList.contains('end')){

    //retrieve the associated inputs
    const tr = e.target.parentNode.parentNode
    const [start, end, actual] = [...tr.querySelectorAll('input')]
  }
})

使用复制粘贴的diff更新了代码，但仍需调试

功能差异（开始、结束）{
start=start.split（“：”）；
end=end.split（“：”）；
const startDate=新日期（0,0,0，开始[0]，开始[1]，0）；
const endDate=新日期（0,0,0，end[0]，end[1]，0）；
让diff=endDate.getTime（）-startDate.getTime（）；
恒时=数学楼层（差异/1000/60/60）；
差异-=小时*1000*60*60；
常数分钟=数学楼层（差异/1000/60）；
返回（小时<9？“0”：“）+小时+”：“+（分钟<9？“0”：“）+分钟；
}
document.querySelector（'table'）。addEventListener（'change'，函数（e）{
const classList=e.target.classList
if（classList.contains（'start'）| | classList.contains（'end'））{
//检索相关的输入
const tr=e.target.parentNode.parentNode
const[start，end，actual]=[…tr.queryselectoral（'.start，.end，.actual'）]
常量值=diff（start.value，end.value）
实际值=实际值
}
})

是否可以参考特定的表格？因为我现在正在读取page@blackZombie通常

querySelector（'table'）

应该返回第一个匹配的表。如果您希望明确，您仍然可以强制执行

querySelector（'table:first child'）

不幸的是，在我的案例中，我不得不更新问题，但是当输入更多并排时，此脚本不起作用，很抱歉，现在每个tr中都有大量输入（时间类型）。。。计算差异时应采用哪些输入？类开始和结束的那个？@grodzi class=“开始”和class=“结束”到class=“实际”。我写的其他代码是为了展示代码的样子

document.querySelector('table').addEventListener('change', function(e) {
  const classList = e.target.classList
  if (classList.contains('start') || classList.contains('end')){

    //retrieve the associated inputs
    const tr = e.target.parentNode.parentNode
    const [start, end, actual] = [...tr.querySelectorAll('input')]
  }
})