jQuery addClass example

Change class name on click in jQuery

HTML

<div class="s-mobile-filters-panel"> <div class="s-mobile-filters-panel__header"> <div class="s-mobile-filters-panel__close-filters-btn-col"> <button class="s-mobile-filter-close-filters-btn">В каталог</button> </div> <div class="s-mobile-filters-panel__filters-reset-btn-col"> <button class="s-mobile-filter-reset-all-filters-btn"> <svg width="13" height="13" viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" clip-rule="evenodd" d="M0.444793 12.3059C0.199141 12.0603 0.199141 11.662 0.444793 11.4164L11.4164 0.444793C11.662 0.199141 12.0603 0.19914 12.3059 0.444793C12.5516 0.690445 12.5516 1.08873 12.3059 1.33438L1.33438 12.3059C1.08873 12.5516 0.690445 12.5516 0.444793 12.3059Z"></path> <path fill-rule="evenodd" clip-rule="evenodd" d="M0.443879 0.444793C0.689531 0.199141 1.08781 0.199141 1.33346 0.444793L12.305 11.4164C12.5507 11.662 12.5507 12.0603 12.305 12.3059C12.0594 12.5516 11.6611 12.5516 11.4154 12.3059L0.443879 1.33438C0.198227 1.08873 0.198227 0.690445 0.443879 0.444793Z"></path> </svg> <span>Сбросить фильтры</span> </button> </div> </div> <div class="s-mobile-filters-panel__content"> <ul class="s-mobile-filters-panel__filter-list"> <li class="s-mobile-filters-panel__filter-list-item"> <div class="s-mobile-filter-item"> <div class="s-mobile-filter-item__tooltip-col"> <span class="s-mobile-filter-item-tooltip"></span> </div> <div class="s-mobile-filter-item__content-col"> <div class="s-mobile-filter-type-select"> <select multiple="" class="s-mobile-filter-type-select__select"> <option class=" " id="220210" name="brend13" value="220210">Aquanet </option> <option class=" " id="16147" name="brend13" value="16147">Aqwella</option> <option class="is--popular " id="16040" name="brend13" value="16040">BelBagno</option> <option class=" " id="16149" name="brend13" value="16149">Belux</option> <option class=" " id="716479" name="brend13" value="716479">CeramaLux</option> <option class="is--popular " id="16089"...

SCSS

@charset "UTF-8";

// Root
$root__assets-folder: '/templates/future';
$root__site-fonts: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
$root__site-width: 1200px;
$root__container-inner-padding-mobile: 10px;
$root__site-text-color: #000;
$root__site-background-color: #FBFBFB;
$root__site-footer-background-color: #fbfcfc;

$root__border-radius: 4px;

$root__font-size: 15px; // Должны быть одинаковыми
$root__font-size--stripped: 15; // Должны быть одинаковыми
$root__line-height: 1.5;
$root__font-main: Lato;

$root__color-blue: #2992C4;
$root__color-light-blue: #EFF7FB;
$root__color-orange: #EF6F31;
$root__color-light-orange: #FEF7F3;
$root__color-green: #0D9F46;
$root__color-light-green: #edf6f0;
$root__color-orange: #EF6F31;


// Badges' colors
$badge__new-color: #7FBA96;
$badge__bestseller-color: #BE87A0;

// Responses' colors
$response-color__success: #DFF0D8;
$response-color__warning: #FEEFB3;
$response-color__error: #ffc9c9;


// Headings
$heading-size__h1: #{27/$root__font-size--stripped}rem; // 27px
$heading-size__h2: #{21/$root__font-size--stripped}rem; // 21px


// UI
$ui__btn-color-blue: $root__color-blue;
$ui__btn-color-orange: $root__color-orange;
$ui__btn-color-green: $root__color-green;

// UI Extra
$ui__remove-color: #F11E1E;


// Utilities


// Сколлинг для iOS
@mixin ios-scroll() {
	-webkit-overflow-scrolling: touch;
}

// Sticky
@mixin sticky() {
	position: relative; // fallback
	position: -webkit-sticky;
	position: sticky;
}

// Невыделяемые элементы
@mixin no-select() {
	-webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

// Убираем подсветку ссылок на мобильных
@mixin no-touch-glow-mobile() {
	-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}

// Полноэкранные тени
@mixin shadow-overlay() {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height:...

JavaScript

// Первая попытка
$('.s-mobile-filter-type-select__select').on('change', function() {
  var mobileFilterOptions = [];
  var mobileFilterOptionsList = $(this).closest('.s-mobile-filter-type-select').find('.s-mobile-filter-type-select__selected-options-list-content');

  $.each($(".s-mobile-filter-type-select__select option:selected"), function(){
      mobileFilterOptions.push($(this).text());
  });

  mobileFilterOptionsList.text(mobileFilterOptions.join(", "));

});