0

Есть селект с 3-мя option и блок с вложенными 3 блоками. Как мне показывать вложенный блок 1 если выбран первый option и т.д. ?

Мне как бы нужно брать индекс option и под таким же индексом показывать.

Я взял код от табов JQ и попытался его переделать под селект. Но толи this не срабатывает, толи индекс не определяется. Подскажите куда обратить внимание?

 $('select').on('change', function () {
        $(this)
            .closest('.wrapper').find('.block').removeClass('active').eq($(this).index()).addClass('active');
    });
.hero-apartment__img {
  displa: none;
}

.hero-apartment__img.active {
  display: block;
}

.block {
  display: none;
  width: 150px;
  height: 150px;
  border: 1px solid;
}

.block.active {
  display: block;
}

.inner {
  display: none;
  box-sizing: border-box;
  margin-bottom: 5px;
  width: 20px;
  height: 20px;
  padding: 10px;
  background-color:red;
}

.inner.active {
  display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<select>
  <option>1</option>
  <option>2</option>
  <option>3</option>
</select>
<div class="wrapper">
  <div class="block active">
    <div class="inner active"> <span>1</span></div>
    <div class="inner"> <span>2</span></div>
    <div class="inner"> <span>3</span></div>
  </div>
  <div class="block">
    <div class="inner"> <span>1</span></div>
    <div class="inner"> <span>2</span></div>
    <div class="inner"> <span>3</span></div>
  </div>
  <div class="block">
    <div class="inner"> <span>1</span></div>
    <div class="inner"> <span>2</span></div>
    <div class="inner"> <span>3</span></div>
  </div>
</div>

2
  • какой блок .block и какой блок .inner в блоке нужно показать если выбрано 2 ?
    – Alex
    27 мар 2019 в 13:17
  • @Alex блок активный. inner второй. Мне как бы неважно. Можно навешивать активный класс на все вторые .inner в каждом .block. 27 мар 2019 в 13:19

1 ответ 1

3

$('select').on('change', function() {
  $('.wrapper .block.active .inner')
    .removeClass('active')
    .eq($(this).prop('selectedIndex'))
    .addClass('active');
});
.hero-apartment__img {
  displa: none;
}

.hero-apartment__img.active {
  display: block;
}

.block {
  display: none;
  width: 150px;
  height: 150px;
  border: 1px solid;
}

.block.active {
  display: block;
}

.inner {
  display: none;
  box-sizing: border-box;
  margin-bottom: 5px;
  width: 20px;
  height: 20px;
  padding: 10px;
  background-color: red;
}

.inner.active {
  display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<select>
  <option>1</option>
  <option>2</option>
  <option>3</option>
</select>
<div class="wrapper">
  <div class="block active">
    <div class="inner active"> <span>1</span></div>
    <div class="inner"> <span>2</span></div>
    <div class="inner"> <span>3</span></div>
  </div>
  <div class="block">
    <div class="inner"> <span>1</span></div>
    <div class="inner"> <span>2</span></div>
    <div class="inner"> <span>3</span></div>
  </div>
  <div class="block">
    <div class="inner"> <span>1</span></div>
    <div class="inner"> <span>2</span></div>
    <div class="inner"> <span>3</span></div>
  </div>
</div>


UPD - чтобы класс active навешивался на .inner в каждом .block:

$('select').on('change', function() {
  $('.wrapper .block .inner').removeClass('active')
  let i = $(this).prop('selectedIndex')
  $('.wrapper .block').each(function(k, v) {
    $(v).find('.inner').eq(i).addClass('active');
  });
});
.hero-apartment__img {
  display: none;
}

.hero-apartment__img.active {
  display: block;
}

.block {
  display: none;
  width: 150px;
  height: 150px;
  border: 1px solid;
}

.block.active {
  display: block;
}

.inner {
  display: none;
  box-sizing: border-box;
  margin-bottom: 5px;
  width: 20px;
  height: 20px;
  padding: 10px;
  background-color: red;
}

.inner.active {
  display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<select>
  <option>1</option>
  <option>2</option>
  <option>3</option>
</select>
<div class="wrapper">
  <div class="block active">
    <div class="inner active"> <span>1</span></div>
    <div class="inner"> <span>2</span></div>
    <div class="inner"> <span>3</span></div>
  </div>
  <div class="block">
    <div class="inner"> <span>1</span></div>
    <div class="inner"> <span>2</span></div>
    <div class="inner"> <span>3</span></div>
  </div>
  <div class="block">
    <div class="inner"> <span>1</span></div>
    <div class="inner"> <span>2</span></div>
    <div class="inner"> <span>3</span></div>
  </div>
</div>

5
  • А получается на соседние блоки он уже не ставит класс. Ставит только на первый .block. 27 мар 2019 в 14:16
  • @Григорий, так Вы же в комментарии написали - блок активный, а активный блок - блок с классом .active. Если Вы подразумевали иное и в этом есть необходимость, напишите пожалуйста подробнее, обновлю ответ
    – Alex
    27 мар 2019 в 14:28
  • Да, моя ошибка. Нужно что бы класс навешивался на все .inner которые в каждом блоке .block. 27 мар 2019 в 14:49
  • @Григорий обновили ответ, смотрите код в UPD
    – Alex
    27 мар 2019 в 15:06
  • 1
    Спасибо большое! 27 мар 2019 в 15:12

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.