jQuery addClass example

Change class name on click in jQuery

by fervark

HTML

<div class="block">
  <div class="block_date">
    <div class="block_date-item">Дата 1</div>
    <div class="block_date-item">Дата 2</div>
    <div class="block_date-item">Дата 3</div>
    <div class="block_date-item">Дата 4</div>
    <div class="block_date-item">Дата 5</div>
    <div class="block_date-item">Дата 6</div>
    <div class="block_date-item">Дата 7</div>
    <div class="block_date-item">Дата 8</div>
    <div class="block_date-item">Дата 9</div>
    <div class="block_date-item">Дата 10</div>
  </div>
  <div class="block_range">
    <div class="block_range-handle"></div>
    <div class="block_range-motion">
      <div class="block_range-motion-trigger" id="block_range-motion1"></div>
      <div class="block_range-motion-trigger" id="block_range-motion2"></div>
    </div>
    <div class="block_range-handle"></div>
  </div>
</div>

CSS

body {
  background: #fff;
  padding: 20px;
  font-family: Helvetica;
}

.block {
  display: flex;
  position: relative;
  height: 48px;
  border-top: 1px solid #c1c7d0;
  flex-shrink: 0;
  overflow: hidden;
}

.block_date {
  display: flex;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
}

.block_date-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  position: relative;
  width: 110px;
  height: 100%;
  flex-shrink: 0;
  font-size: 13px;
  color: #7A869A;
  z-index: 1;
  cursor: pointer;
}

.block_date-item:hover {
  opacity: 0.7;
}

.block_range {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: stretch;
}

.block_range-handle {
  position: relative;
  background: rgba(255, 255, 255, 0.7);
  width: 100%;
  z-index: 5;
}

.block_range-motion {
  position: relative;
  min-width: 110px;
  width: 220px;
  border: 1px solid #ccc;
  flex-shrink: 0;
  overflow: hidden;
}

.block_range-motion-trigger {
  position: absolute;
  top: 12px;
  bottom: 12px;
  border-radius: 100%;
  background: #ccc;
  width: 20px;
  z-index: 5;
  cursor: w-resize;
}

.block_range-motion-trigger:nth-child(1) {
  left: -10px;
}

.block_range-motion-trigger:nth-child(2) {
  right: -10px;
}

JavaScript

var $block = $('.block');
var $eMotion = $('.block_range-motion');

function motion() {
  $block.on('mousemove', function(event) {
    var motionWidth = event.clientX - $eMotion.offset().left;
    $eMotion.css({
      'width': motionWidth
    });
  });
  $block.mouseup(function() {
    $block.unbind('mousemove');
  });
}

$block.on('mousedown', '.block_range-motion-trigger', function() {
  motion();
});