jQuery addClass example

Change class name on click in jQuery

by joshmoto

HTML

<div class="clock">
  <div class="h-1">
    <div class="n-8">
      <time class="t-01"><span>01</span></time>
      <time class="t-02"><span>02</span></time>
      <time class="t-03"><span>03</span></time>
      <time class="t-04"><span>04</span></time>
      <time class="t-05"><span>05</span></time>
      <time class="t-06"><span>06</span></time>
      <time class="t-07"><span>07</span></time>
      <time class="t-08"><span>08</span></time>
      <time class="t-09"><span>09</span></time>
      <time class="t-10"><span>10</span></time>
      <time class="t-11"><span>11</span></time>
      <time class="t-12"><span>12</span></time>
      <time class="t-13"><span>13</span></time>
      <time class="t-14"><span>14</span></time>
      <time class="t-15"><span>15</span></time>
      <time class="t-16"><span>16</span></time>
      <time class="t-17"><span>17</span></time>
      <time class="t-18"><span>18</span></time>
      <time class="t-19"><span>19</span></time>
      <time class="t-20"><span>20</span></time>
      <time class="t-21"><span>21</span></time>
      <time class="t-22"><span>22</span></time>
      <time class="t-23"><span>23</span></time>
      <time class="t-24"><span>24</span></time>
    </div>
  </div>
  <div class="h-2">
    <div class="n-9">
      <time class="t-01"><span>01</span></time>
      <time class="t-02"><span>02</span></time>
      <time class="t-03"><span>03</span></time>
      <time class="t-04"><span>04</span></time>
      <time class="t-05"><span>05</span></time>
      <time class="t-06"><span>06</span></time>
      <time class="t-07"><span>07</span></time>
      <time class="t-08"><span>08</span></time>
      <time class="t-09"><span>09</span></time>
      <time class="t-10"><span>10</span></time>
      <time class="t-11"><span>11</span></time>
      <time class="t-12"><span>12</span></time>
      <time class="t-13"><span>13</span></time>
      <time class="t-14"><span>14</span></time>
      <time class="t-15"><span>15</span></time>
 ...

SCSS

.clock {
  padding: 40px;
  margin: 40px auto;
  width: calc(40px*8);
  
  .h-1,
  .h-2,
  .m-1,
  .m-2,
  .s-1,
  .s-2 {
    margin-bottom: 0px;
    width: 50%;
    float: left;
    position: relative;
    &:before {
      content: "";
      padding-top: 150%;
      display: block;
    }
    >DIV {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
  }
  TIME {
    /* clock */
    float: left;
    width: calc(40px);
    height: calc(40px);
    display: block;
    background: #eeeeee;
    border-radius: 50%;
    position: relative;
    
    SPAN {
      position: absolute;
    }
    
    /* the hands */
    &:before,
    &:after {
      border-radius: 1%;
      content: "";
      display: block;
      width: 2px;
      height: 50%;
      background: #424242;
      left: 50%;
      position: absolute;
      transform: translateX(-1px);
      transform-origin: center bottom;
      transition: all .5s;
    }
  }
}


// rotate
@mixin time($hr,$mi) {
 
  $hour : 360/12*$hr;
  $min : 360/60*$mi;

  &:before {
    transform: rotate(#{$hour}deg);
  }
  &:after {
    transform: rotate(#{$min}deg);
  }
  
}


.n-0 {
  .t-01 {
    @include time(6,15);
  }
  .t-02 {
    @include time(9,15);
  }
  .t-03 {
     @include time(9,15);
  }
  .t-04 {
    @include time(9,30);
  }
  .t-05 {
    @include time(12,30);
  }
  .t-06 {
    @include time(6,15);
  }
  .t-07 {
    @include time(9,30);
  }
  .t-08 {
    @include time(12,30);
  }
  .t-09 {
    @include time(12,30);
  }
  .t-10 {
    @include time(12,30);
  }
  .t-11 {
    @include time(12,30);
  }
  .t-12 {
    @include time(12,30);
  }
  .t-13 {
    @include time(12,30);
  }
  .t-14 {
    @include time(12,30);
  }
  .t-15 {
    @include time(12,30);
  }
  .t-16 {
    @include time(12,30);
  }
  .t-17 {
    @include time(12,30);
  }
  .t-18 {
    @include time(3,00);
  }
  .t-19{
    @include time(9,00);
  }
  .t-20 {
    @include time(12,30);
  }
  .t-21 {
    @include...