jQuery addClass example

Change class name on click in jQuery

by Dmitri Ganenco

HTML

<div class="container">
  <div class="numChoice first-row">
  <div class="col-md-5ths">
    <div class="num">1</div>
  </div>
  <div class="col-md-5ths">
    <div class="num">2</div>
  </div>
  <div class="col-md-5ths">
    <div class="num">3</div>
  </div>
  <div class="col-md-5ths">
    <div class="num">4</div>
  </div>
  <div class="col-md-5ths">
    <div class="num">5</div>
  </div>
</div>
  <br><br>
<div class="numChoice second-row">
  <div class="col-md-5ths">
    <div class="num">1</div>
  </div>
  <div class="col-md-5ths">
    <div class="num">2</div>
  </div>
  <div class="col-md-5ths">
    <div class="num">3</div>
  </div>
  <div class="col-md-5ths">
    <div class="num">4</div>
  </div>
  <div class="col-md-5ths">
    <div class="num">5</div>
  </div>
</div>
</div>

CSS

.numChoice{
  display: block;
}
.num{
  width: 20px;
  height: 20px;
  background-color: #DDD;
  text-align: center;
  float: left;
  cursor: pointer;
}
.col-md-5ths.active{
    color: green;
}
.col-md-5ths.disabled{
    color: red;
}

JavaScript

$('.numChoice > .col-md-5ths').click(function() {
			var otherSide = $(this).parent().hasClass('first-row') ? '.second-row' : '.first-row';
  		var otherElement = $(otherSide).children().removeClass('disabled').eq($(this).index());
      var $thisNum = $(this).children();
    if (!$(this).hasClass('disabled')) {    
        $thisNum.toggleClass('active').siblings().removeClass('active');
        $thisNum.hasClass('active') ? otherElement.addClass('disabled') : otherElement.removeClass('disabled');
        $thisNum.hasClass('disabled') ? otherElement.removeClass('active') : otherElement.removeClass('active');
    } else {
        $(this).removeClass('disabled');
        $thisNum.toggleClass('active').siblings().removeClass('active');
        $thisNum.hasClass('active') ? otherElement.addClass('disabled') : otherElement.removeClass('disabled');
        $thisNum.hasClass('disabled') ? otherElement.removeClass('active') : otherElement.removeClass('active');

    }

});