我正在编写一个html代码,如下所示,它来自这个url。在其中,显示在时区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>
问题陈述:
在line#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
,因为它工作得很好。
这就是我尝试过的(我已经将我的脚本放在fiddle https://jsfiddle.net/5bmoe4tq/中,因为我想让问题变得简短),但它似乎不起作用。
发布于 2019-04-11 04:31:11
我已经修改了你的代码来处理一个按钮点击,而不是包装器点击。
我不完全清楚您要执行的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>
发布于 2019-04-19 22:56:49
您可以使用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
https://stackoverflow.com/questions/55620596
复制相似问题