Показать сообщение отдельно
  #1 (permalink)  
Старый 24.07.2018, 20:10
Интересующийся
Отправить личное сообщение для Ingred Посмотреть профиль Найти все сообщения от Ingred
 
Регистрация: 05.06.2018
Сообщений: 14

Переключение классов
здравствуйте! Проблема вот в чем...имеется страница со следующей структурой
<div class="subs-bg blue"><div class="slider content">
  <div class="heading row">
                <a class="asub" data-subs="blue">Ежемесячный</a>
                <a class="asub" data-subs="green">Годовой</a>
                <a class="asub active" data-subs="red">3D Сцены</a>
  </div>
  <div class="items row">
      <div class="item month col-md-6 col-xs-12">
        <span class="header">Базовый</span>
        <div class="text-center">
        </div>
        <div class="price">
          <p class="cur cur-rub">100</p>
        </div>
        <div class="desc">
          3 моделей в месяц          <a href="/?route=account/signup"><br>+ Начать</a>
        </div>
      </div>
      <div class="item year col-md-6 col-xs-12">
        <span class="header">Базовый</span>
        <div class="text-center">
        </div>
        <div class="price">
          <p class="cur cur-rub">1200</p>
        </div>
        <div class="desc">
          40 моделей в год          <a href="/?route=account/signup"><br>+ Начать</a>
        </div>
      </div>
<div class="item sceny col-md-6 col-xs-12">
        <span class="header">Базовый</span>
        <div class="text-center">
        </div>
        <div class="price">
          <p class="cur cur-rub">1200</p>
        </div>
        <div class="desc">
          40 моделей в год          <a href="/?route=account/signup"><br>+ Начать</a>
        </div>
      </div>
  </div>
</div></div>


содержимое переключалось так:
$(".asub").on("click", function(e) {
  $(".asub").removeClass('active');
  $(this).addClass('active');
  
  if( $(this).attr('data-subs') == 'green' ) {
    x = 'blue';
    y = 'green';  
  	$('.month').removeClass('on');   
  	$('.year').addClass('on');
  } else {
    x = 'green';
    y = 'blue';
  	$('.year').removeClass('on');
  	$('.month').addClass('on');
  }
  $(".subs-bg").removeClass(x);
  $(".subs-bg").addClass(y);
});


Нужно добавить еще один раздел "red" c классом содержимого sceny
Добавила вот так
$(".asub").on("click", function(e) {
  $(".asub").removeClass('active');
  $(this).addClass('active');

    if( $(this).attr('data-subs') == 'green' ) {
    x = 'blue';
    y = 'green';
    z = 'red';
  	$('.month').removeClass('on');
    $('.sceny').removeClass('on');
  	$('.year').addClass('on');
  } 
    if( $(this).attr('data-subs') == 'blue' ) {
    x = 'blue';
    y = 'green';
    z = 'red';
  	$('.month').addClass('on');
    $('.sceny').removeClass('on');
  	$('.year').removeClass('on');
  }  
    if( $(this).attr('data-subs') == 'red' ) {
    x = 'blue';
    y = 'green';
    z = 'red';
  	$('.month').removeClass('on');
    $('.sceny').addClass('on');
  	$('.year').removeClass('on');
  }      
  $(".subs-bg").removeClass(x);
  $(".subs-bg").addClass(y);
});

Вроде бы работает, но при клике на "red" к subs-bg встает класс green, если правильно понимаю из-за последних двух строк. а как исправить их - не понимаю. Заранее спасибо за помощь

Последний раз редактировалось Ingred, 24.07.2018 в 20:18.
Ответить с цитированием