我正在编写如下所示的 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>
问题陈述:
在 #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
,因为它工作正常。
这是我尝试过的方法(我已将我的脚本放在 fiddle https://jsfiddle.net/5bmoe4tq/ 中,因为我想让问题简短)但它似乎不起作用。
最佳答案
我已经修改了您的代码以处理其中一个按钮点击而不是包装器点击。
我不完全清楚你在拍摄什么 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>
关于javascript - 从 UI 选择特定时区时在 javascript/jquery 中添加类,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55620596/