добавить класс в javascript / jquery, когда конкретный часовой пояс выбран из пользовательского интерфейса

Question

Я работаю над 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" (любой из них из пользовательского интерфейса), тогда должно отобразитьсякак это с датой вверху:

для часового пояса 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/, так как я хочу задать вопроскороче) но это не похоже на работу.

Answer 1

Вы можете использовать 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

Answer 2

Я изменил ваш код, чтобы обрабатывать одно нажатие кнопки вместо щелчка оболочки.

Мне не совсем понятно, для каких 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 был легче.

1. Объединить шоу (они должны быть на странице по порядку)
2. Найти целевой «бар даты» для шоу
3. Переместите это шоу на панель даты, под которой оно должно быть.

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>