如何使用类对每个元素执行js函数

问题描述

我编写了一个脚本，该脚本从以下时间范围设置的时间中抽出时间：“ 2020年10月29日格林威治标准时间”，并将其交换为用户所在时区中的计算日期。

问题在于该代码仅适用于第一个跨度，我是javascript的新手，我无法全神贯注于如何创建foreach循环。有人可以帮助我调整脚本，以便遍历提供的html吗？预先感谢。

JavaScript：

var timestamp = document.getElementById('timestamp'),t         = new Date(timestamp.innerHTML),hours     = t.getHours(),min       = t.getMinutes() + '',pm        = false,months    = ['January','February','March','April','May','June','July','August','September','October','November','December'];

    if(hours > 11){
       hours = hours - 12;
       pm = true;
    }

    if(hours == 0) hours = 12;
    if(min.length == 1) min = '0' + min;

    timestamp.innerHTML = months[t.getMonth()] + ' ' + t.getDate() + ',' + t.getFullYear() + ' ' + hours + ':' + min + ' ' + (pm ? 'pm' : 'am') + ',' + Intl.DateTimeFormat().resolvedOptions().timeZone + ' time';

HTML：

<span class="timestamp">October 29,2020 9:00 am GMT</span><br>
<span class="timestamp">October 29,2020 2:00 am GMT</span><br>
<span class="timestamp">October 29,2020 4:00 am GMT</span><br>
<span class="timestamp">October 30,2020 3:00 am GMT</span><br>
<span class="timestamp">October 28,2020 7:00 am GMT</span><br>
<span class="timestamp">October 29,2020 8:00 am GMT</span><br>

解决方法

您应该给所有元素一个“时间戳”类，因为ID意味着唯一。然后，您可以使用document.querySelectorAll获取所有元素。

document.querySelectorAll('.timestamp').forEach(timestamp=>{
    let    t         = new Date(timestamp.innerHTML),hours     = t.getHours(),min       = t.getMinutes() + '',pm        = false,months    = ['January','February','March','April','May','June','July','August','September','October','November','December'];

    if(hours > 11){
       hours = hours - 12;
       pm = true;
    }

    if(hours == 0) hours = 12;
    if(min.length == 1) min = '0' + min;

    timestamp.innerHTML = months[t.getMonth()] + ' ' + t.getDate() + ',' + t.getFullYear() + ' ' + hours + ':' + min + ' ' + (pm ? 'pm' : 'am') + ',' + Intl.DateTimeFormat().resolvedOptions().timeZone + ' time';
});

,

该ID必须是唯一的，最好使用时间戳作为类名。因此，您可以使用document.getElementsByClassName来获取所有这些信息。

let timestamps = document.getElementsByClassName('timestamp');
//console.log(timestamps,timestamps.length);
for (let i=0; i<timestamps.length; i++) {
    let    t         = new Date(timestamps[i].innerHTML),'December'];

    if(hours > 11){
       hours = hours - 12;
       pm = true;
    }

    if(hours == 0) hours = 12;
    if(min.length == 1) min = '0' + min;

    timestamps[i].innerHTML = months[t.getMonth()] + ' ' + t.getDate() + ',' + Intl.DateTimeFormat().resolvedOptions().timeZone + ' time';
}

<span class="timestamp">October 29,2020 9:00 am GMT</span><br>
<span class="timestamp">October 29,2020 2:00 am GMT</span><br>
<span class="timestamp">October 29,2020 4:00 am GMT</span><br>
<span class="timestamp">October 30,2020 3:00 am GMT</span><br>
<span class="timestamp">October 28,2020 7:00 am GMT</span><br>
<span class="timestamp">October 29,2020 8:00 am GMT</span><br>