jQuery addClass example

Change class name on click in jQuery

HTML

<div class="sounds-buttons-wrapper">
    <div class="sounds-wrapper" id="music-btn-wrapper">
      <div class="sounds-btn">Music</div>
      <div class="sounds-btn-bottom" id="music-bottom">
        <div class="btn sounds-btn-left" id="music-on">On</div>
        <div class="btn sounds-btn-right" id="music-off">Off</div>
      </div>
    </div>


    <div class="sounds-wrapper" id="sound-btn-wrapper">
      <div class="sounds-btn">Sound</div>
      <div class="sounds-btn-bottom" id="sound-bottom">
        <div class="btn sounds-btn-left" id="sound-on">On</div>
        <div class="btn sounds-btn-right" id="sound-off">Off</div>
      </div>
    </div>
  </div>

CSS

* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
body {
  background: #eee;
}
.sounds-buttons-wrapper {
  width: 100%;
  height: 100vh;
  perspective: 1000px;
  perspective-origin: center 70%;
  z-index: 100;
}

.sounds-wrapper {
  position: absolute;
  top: -100%;
  width: 220px;
  transition: all 0.6s;
  transform-style: preserve-3d;
  transform-origin: top;
}

#music-btn-wrapper {
  left: 20%;
  animation: startBtnJump 3s both;
}

#sound-btn-wrapper {
  right: 20%;
  animation: startBtnJump 3s 0.1s both;
}

.sounds-btn {
  width: 100%;
  height: 75px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  text-transform: uppercase;
  font-size: 50px;
  font-weight: 700;
  cursor: pointer;
  color: #c0392b;
  outline: 10px solid #c0392b;
  transition: all 0.6s;
  transform-style: preserve-3d;
  text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.6);
}
.sounds-btn:before, .sounds-btn:after {
  content: "";
  position: absolute;
  top: 0;
  width: 60px;
  height: inherit;
  outline: inherit;
  transition: inherit;
}
.sounds-btn:before {
  left: -68px;
  transform: rotateY(-90deg) translateX(-10px);
  transform-origin: right;
}
.sounds-btn:after {
  right: -68px;
  transform: rotateY(90deg) translateX(10px);
  transform-origin: left;
}

.sounds-btn-bottom {
  width: 100%;
  display: inline-block;
  height: 60px;
  outline: 10px solid #111;
  display: flex;
  justify-content: space-between;
  background: #111;
  transform-origin: top;
  transform: rotateX(-90deg) translateZ(10px) translateY(10px);
}
.sounds-btn-bottom .btn {
  width: 70px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 5px solid #c0392b;
  font-size: 20px;
  color: #c0392b;
  text-align: center;
  transition: all 0.6s;
  text-transform: uppercase;
  cursor: pointer;
}
.sounds-btn-bottom .btn:hover, .sounds-btn-bottom .btn.sounds-btn-active {
  background: #c0392b;
 ...

JavaScript

sondSettings();

function sondSettings() {
		$('.sounds-wrapper').on('mouseenter', function() {
      $(this).addClass('sounds-wrapper-active');
    });
    $('.sounds-wrapper').on('mouseleave', function() {
      $(this).removeClass('sounds-wrapper-active');
    });
    
    $('#music-bottom').on('mouseenter', '.sounds-btn-left', function() {
      $(this).closest('.sounds-wrapper').addClass('sounds-btn-hover-left');
    });
    $('#music-bottom').on('mouseleave', '.sounds-btn-left', function() {
      $(this).closest('.sounds-wrapper').removeClass('sounds-btn-hover-left');
    });
    
    // Мой пример 
/*     $('#sound-bottom').on('mouseenter', '.sounds-btn-right', function() {
      $(this).closest('.sounds-wrapper').addClass('sounds-btn-hover-right');
    });
    $('#sound-bottom').on('mouseleave', '.sounds-btn-right', function() {
      $(this).closest('.sounds-wrapper').removeClass('sounds-btn-hover-right');
    }); */
    
    // Ваш пример
	 	$('#sound-bottom').on('hover', function(event) {
      event.stopPropagation();
      $(this).closest('.sounds-wrapper').addClass('sounds-btn-hover-right');
    }, function(event) {
      event.stopPropagation();
      $(this).closest('.sounds-wrapper').removeClass('sounds-btn-hover-right');
    });

	  $('#music-bottom').on('click', '.btn', function() {
      $('#music-bottom').find('.btn').removeClass('sounds-btn-active').addClass('sounds-btn-not-active');
      $(this).addClass('sounds-btn-active');
    });
    $('#sound-bottom').on('click', '.btn', function() {
      $('#sound-bottom').find('.btn').removeClass('sounds-btn-active').addClass('sounds-btn-not-active');
      $(this).addClass('sounds-btn-active');
    });
    
   // Настройка звука
    $('#sound-on').on('click', function() {
      sound = new Audio('https://sound-pack.net/download/Sound_16488.mp3');
      soundEnable();
    });
    $('#sound-off').on('click', function() {
      sound = new Audio();
      soundEnable();
    });

    // Разрешить...