不同属性值更改时如何在jquery中添加类?

时间:2019-04-12 16:08:48

标签: javascript jquery html dom

我正在处理如下所示的html代码。代码下方的屏幕截图属于下面代码中的 schedule-action-bar 类。 (为了使我的问题最小化,目前从代码中的nt处删除了ct)

<div class="schedule-wrapper" id="js-schedule-wrapper" data-timezone="nt">    <!-- It changes to pt, mt, and et --> 
   <div class="schedule-action-bar" onclick="timezoneCheck()">
      <div class="schedule-timezone-filter">
         Select your timezone:            
         <ul id="js-timezone-picker">
            <li>
               <button id="js-time-pt" class="" data-timezone="pt">PT</button>
            </li>
            <li>
               <button id="js-time-mt" class="" data-timezone="mt">MT</button>
            </li>
            <li>
               <button id="js-time-et" class="" data-timezone="et">ET</button>
            </li>
         </ul>
      </div>
   </div>
   <!-- want to add this class -->
   <!--
   <div class="schedule-date-bar">
      April 12            
   </div>
   -->
   <div class="schedule-show">
      <div class="schedule-show-time">
         <time datetime="21:00 11-04-2019" data-timezone="pt">21:00</time>
         <time datetime="22:00 11-04-2019" data-timezone="mt">22:00</time>
         <time datetime="00:00 12-04-2019" data-timezone="et">00:00</time>
      </div>
   </div>
   <!-- .schedule-show -->
</div>


屏幕截图:

enter image description here

问题陈述:

从UI中选择其他时区(在屏幕截图中)时,该值 data-timezone中的{}更改为Line#A的pt,mt和et。我现在想做的是在<div class="schedule-date-bar"> <!-- whatever date belong to the respective timezone --> </div>

之前添加一个schedule-show
<script>
    function timezoneCheck() {
        jQuery(function ($) {
            $("#js-schedule-wrapper").click(function () {
                if ($('#js-schedule-wrapper').attr('data-timezone') === 'et') {

                } else if ($('#js-schedule-wrapper').attr('data-timezone') === 'pt') {

                } else if ($('#js-schedule-wrapper').attr('data-timezone') === 'mt') {

                } 
            })
        })
    }
</script>

这是我上面尝试过的,但还需要做更多。

0 个答案:

没有答案