当从 UI 中选择特定时区时，在 javascript/jquery 中添加类答案

【问题标题】：add class in javascript/jquery when a particular timezone is selected from UI当从 UI 中选择特定时区时，在 javascript/jquery 中添加类
【发布时间】：2025-11-21 15:30:02
【问题描述】：

我正在编写一个来自url 的 html 代码，如下所示。其中显示在 ET 时区下的节目是 100% 正确的，因为它们属于正确的日期，但对于其他时区（PT、MT、CT、AT、NT），一些节目的日期不正确。

代码下方的屏幕截图属于下面代码中的 schedule-action-bar 类。（此时从代码中删除了 ct、at 和 nt，以尽量减少我的问题）

<div class="schedule-wrapper" id="js-schedule-wrapper" data-timezone="et">  <!-- Line#A  -->
   <div class="schedule-action-bar">   <!-- this is on UI, from there we can select PT, MT and ET timezones -->
      <div class="schedule-timezone-filter">
         Select your timezone:            
         <ul id="js-timezone-picker">
            <li>
               <button id="js-time-pt" data-timezone="pt">PT</button>
            </li>
            <li>
               <button id="js-time-mt" data-timezone="mt">MT</button>
            </li>
            <li>
               <button id="js-time-ct" data-timezone="et">ET</button>
            </li>
         </ul>
      </div>
   </div>
   <div class="schedule-show">
      Show#A
      <div class="schedule-show-time">
         <time datetime="22:00 10-04-2019" data-timezone="pt">22:00</time>
         <time datetime="23:00 10-04-2019" data-timezone="mt">23:00</time>
         <time datetime="01:00 11-04-2019" data-timezone="et">01:00</time>
      </div>
   </div>
   <!-- .schedule-show -->
   <div class="schedule-show">
      Show#B
      <div class="schedule-show-time">
         <time datetime="23:30 10-04-2019" data-timezone="pt">23:30</time>
         <time datetime="00:30 11-04-2019" data-timezone="mt">00:30</time>
         <time datetime="02:30 11-04-2019" data-timezone="et">02:30</time>
      </div>
   </div>
   <!-- .schedule-show -->
   <div class="schedule-show">
      Show#C
      <div class="schedule-show-time">
         <time datetime="00:30 11-04-2019" data-timezone="pt">00:30</time>
         <time datetime="01:30 11-04-2019" data-timezone="mt">01:30</time>
         <time datetime="03:30 11-04-2019" data-timezone="et">03:30</time>
      </div>
   </div>
   <!-- .schedule-show -->
</div>

问题陈述：

在#A 行，当 data-timezone="pt" 或 data-timezone="mt"（其中任何一个来自 UI）被选中时，它应该像这样显示，日期栏在顶部：

对于时区pt，它应该看起来像这样，日期在顶部

   April 10
   22:00    Show#A
   23:30    Show#B

   April 11
   00:30   Show#C

对于时区mt，它应该看起来像这样，日期在顶部

   April 10
   23:00    Show#A


   April 11
   00:30    Show#B
   01:30    Show#C

此时，它确实显示日期。除了 et 之外的时区中只有一些节目的日期不正确。没有包括时区et，因为它工作正常。

这是我尝试过的（我已将我的脚本放在小提琴https://jsfiddle.net/5bmoe4tq/ 中，因为我想让问题简短一些）但它似乎不起作用。

【问题讨论】：

我在您的帖子中没有看到任何 javascript。你有没有尝试过？
是的。我现在正在添加。
也不需要那些重复的 if/else 基本上做同样的事情
你的逻辑在你的if($(time).attr('data-timezone') === 'nt')中有缺陷。这只检查页面中的第一个。与获取日期时间属性相同
我将完全重新开始，专注于迭代实例，为所有时区/所有节目使用一个进程

标签： javascript jquery html attributes timezone

【解决方案1】：

我已修改您的代码以处理其中一个按钮单击，而不是包装器单击。

我不完全清楚您正在拍摄的 DOM 操作是什么，所以我实现了一个容器来保存显示时间并填充它们

jQuery(function($) {
  //this function will update the timezone when you click a button
  $("button[data-timezone]").click(function() {
    $(this).closest(".schedule-wrapper").attr("data-timezone", $(this).attr("data-timezone"));
    //clear the day-schedules
    $(".day-schedule").empty();
    //repopulate based on the selected timezone
    populateDays();
  });
  populateDays();
});

function populateDays() {
  let targetZone = $('#js-schedule-wrapper').attr('data-timezone');
  $.each($(".day-schedule"), function(idx, elem) {
    let day = $(elem).attr("day");
    $(elem).text(day);
    //get the times for the day, show be damned
    let showtimes = $(`time[data-timezone=${targetZone}][datetime~='${day}']`);
    $.each(showtimes, function(i, time){
      $(elem).append($(time).clone());  //copy the time into the days schedule
    });
  });
}

.day-schedule {
  border: 1px solid black;
  width: 50%;
  margin: auto;
  margin-top: 5px;
}

.schedule-show {
  display: none
}
time{
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="schedule-wrapper" id="js-schedule-wrapper" data-timezone="pt"> // Line#A
  <div class="schedule-action-bar">
    <div class="schedule-timezone-filter">
      Select your timezone:
      <ul id="js-timezone-picker">
        <li>
          <button id="js-time-pt" data-timezone="pt">PT</button>
        </li>
        <li>
          <button id="js-time-mt" data-timezone="mt">MT</button>
        </li>
        <li>
          <button id="js-time-ct" data-timezone="et">ET</button>
        </li>
      </ul>
    </div>
  </div>
  <div day='10-04-2019' class='day-schedule'>
  </div>
  <div day='11-04-2019' class='day-schedule'>
  </div>
  <div class="schedule-show">
    Show#A
    <div class="schedule-show-time">
      <time datetime="22:00 10-04-2019" data-timezone="pt">22:00</time>
      <time datetime="23:00 10-04-2019" data-timezone="mt">23:00</time>
      <time datetime="01:00 11-04-2019" data-timezone="et">01:00</time>
    </div>
  </div>
  <!-- .schedule-show -->
  <div class="schedule-show">
    Show#B
    <div class="schedule-show-time">
      <time datetime="23:30 10-04-2019" data-timezone="pt">23:30</time>
      <time datetime="00:30 11-04-2019" data-timezone="mt">00:30</time>
      <time datetime="02:30 11-04-2019" data-timezone="et">02:30</time>
    </div>
  </div>
  <!-- .schedule-show -->
  <div class="schedule-show">
    Show#C
    <div class="schedule-show-time">
      <time datetime="00:30 11-04-2019" data-timezone="pt">00:30</time>
      <time datetime="01:30 11-04-2019" data-timezone="mt">01:30</time>
      <time datetime="03:30 11-04-2019" data-timezone="et">03:30</time>
    </div>
  </div>
  <!-- .schedule-show -->
</div>

查看您的链接页面后，您似乎可以通过以下方式完成您想要的操作。请注意，我必须将日期添加到 schedule-date-bar，以便 javascript 更容易找到它。

对节目进行互动（它们必须按顺序在页面上）
为节目找到目标“日期栏”
将该节目移至它应位于的日期栏。

jQuery(function($) {
  //this function will update the timezone when you click a button
  $("button[data-timezone]").click(function() {
    $(this).closest(".schedule-wrapper").attr("data-timezone", $(this).attr("data-timezone"));
    //manipulate in case the day changed based on the selected timezone
    populateDays();
  });
  populateDays();
});

function populateDays() {
  let targetZone = $('#js-schedule-wrapper').attr('data-timezone');
  let showtimes = $(`time[data-timezone=${targetZone}]`);
  $.each(showtimes.get().reverse(), function(i, time) {
    let targetDate = $(time).attr("datetime").split(" ")[1];
    let insertionPoint = $(`.schedule-date-bar[day='${targetDate}']`);
    $(time).closest(".schedule-show").insertAfter(insertionPoint);
  });
}

.day-schedule {
  border: 1px solid black;
  width: 50%;
  margin: auto;
  margin-top: 5px;
}

time {
  display: none;
}

[data-timezone=pt] [data-timezone=pt],
[data-timezone=mt] [data-timezone=mt],
[data-timezone=et] [data-timezone=et] {
  display: block;
}

.schedule-date-bar {
  margin-top: 30px;
  margin-bottom: 10px;
  padding-left: 20px;
  color: #34383b;
  background-color: rgba(169, 178, 177, .15);
  position: relative;
  line-height: 2.1;
}

.schedule-show {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: baseline;
  align-items: baseline;
  cursor: pointer;
  border-bottom: 1px solid #d4d8d8;
  max-width: 697px;
  max-width: 69.7rem;
  margin-left: auto;
}

time {
  -ms-flex: 1 0 16.66%;
  flex: 1 0 16.66%;
  max-height: 36px;
  pointer-events: none;
  padding-right: 20px;
  padding-left: 10px;
  color: #34383b;
  line-height: 2.1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="schedule-wrapper" id="js-schedule-wrapper" data-timezone="pt"> // Line#A
  <div class="schedule-action-bar">
    <div class="schedule-timezone-filter">
      Select your timezone:
      <ul id="js-timezone-picker">
        <li>
          <button id="js-time-pt" data-timezone="pt">PT</button>
        </li>
        <li>
          <button id="js-time-mt" data-timezone="mt">MT</button>
        </li>
        <li>
          <button id="js-time-ct" data-timezone="et">ET</button>
        </li>
      </ul>
    </div>
  </div>
  <div day='10-04-2019' class="schedule-date-bar">
    April 10 </div>
  <div day='11-04-2019' class="schedule-date-bar">
    April 11 </div>
  <div class="schedule-show">
    Show#A
    <div class="schedule-show-time">
      <time datetime="22:00 10-04-2019" data-timezone="pt">22:00</time>
      <time datetime="23:00 10-04-2019" data-timezone="mt">23:00</time>
      <time datetime="01:00 11-04-2019" data-timezone="et">01:00</time>
    </div>
  </div>
  <!-- .schedule-show -->
  <div class="schedule-show">
    Show#B
    <div class="schedule-show-time">
      <time datetime="23:30 10-04-2019" data-timezone="pt">23:30</time>
      <time datetime="00:30 11-04-2019" data-timezone="mt">00:30</time>
      <time datetime="02:30 11-04-2019" data-timezone="et">02:30</time>
    </div>
  </div>
  <!-- .schedule-show -->
  <div class="schedule-show">
    Show#C
    <div class="schedule-show-time">
      <time datetime="00:30 11-04-2019" data-timezone="pt">00:30</time>
      <time datetime="01:30 11-04-2019" data-timezone="mt">01:30</time>
      <time datetime="03:30 11-04-2019" data-timezone="et">03:30</time>
    </div>
  </div>
  <!-- .schedule-show -->
</div>

【讨论】：

测试中，敬请期待。
你收到我的问题了吗？如果您检查website，如果我们选择不同的时区，那么有些节目的日期不正确。
只是改变时间，但日期是固定的。
在某个时刻，我已经从我的代码库中删除了 schedule-date-bar 类中的代码，并尝试通过 javascript/jquery 添加日期
我只是作为参考，从中获取时间。在这个sn-p中我只是用它来存储信息。

【解决方案2】：

你可以使用moment.js 这就是这个库存在的原因

您可以通过下一条指令轻松地将时间更新到另一个时区：

var newYork    = moment.tz("2014-06-01 12:00", "America/New_York");
var losAngeles = newYork.clone().tz("America/Los_Angeles");
var london     = newYork.clone().tz("Europe/London");

newYork.format();    // 2014-06-01T12:00:00-04:00
losAngeles.format(); // 2014-06-01T09:00:00-07:00
london.format();     // 2014-06-01T17:00:00+01:00

【讨论】：