文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
社区首页 >问答首页 >从UI中选择特定时区时，在javascript/jquery中添加类

问从UI中选择特定时区时，在javascript/jquery中添加类
EN

Stack Overflow用户
提问于 2019-04-11 04:10:10
回答 2查看 411关注 0票数 2

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

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

代码语言：javascript
复制
<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>

​

​

问题陈述：

在line#A中，当data-timezone="pt“或data-timezone="mt" (UI中的任意一个)被选中时，它应该像这样显示，日期栏在顶部：

适用于时区的 pt，它应该如下所示，日期在顶部

代码语言：javascript
复制
   April 10
   22:00    Show#A
   23:30    Show#B

   April 11
   00:30   Show#C

适用于时区的 mt，它应该如下所示，日期在顶部

代码语言：javascript
复制
   April 10
   23:00    Show#A


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

此时，它确实显示了日期。除了美国东部时间外，只有一些时区的节目日期不正确。我没有包括时区et，因为它工作得很好。

这就是我尝试过的(我已经将我的脚本放在fiddle https://jsfiddle.net/5bmoe4tq/中，因为我想让问题变得简短)，但它似乎不起作用。

javascript
jquery
html
attributes
timezone
EN

回答 2

Stack Overflow用户

发布于 2019-04-11 04:31:11

我已经修改了你的代码来处理一个按钮点击，而不是包装器点击。

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

​

代码语言：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"));
    //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
    });
  });
}
代码语言：javascript
复制
.day-schedule {
  border: 1px solid black;
  width: 50%;
  margin: auto;
  margin-top: 5px;
}

.schedule-show {
  display: none
}
time{
  display: block;
}
代码语言：javascript
复制
<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可以更容易地找到它。

  1. 显示(它们必须按顺序显示在页面上)
  2. 找到显示

的目标“日期栏”

  1. 将该显示移动到它应该在的日期栏。

​

代码语言：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);
  });
}
代码语言：javascript
复制
.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;
}
代码语言：javascript
复制
<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>

​

票数 0
EN

Stack Overflow用户

发布于 2019-04-19 22:56:49

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

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

代码语言：javascript
复制
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
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/55620596

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2024 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号 | 京公网安备号11010802020287

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档