1

Есть код отображения div-ов в зависимости от выбранных значений select-ов. Но он не отображает вложенный код. Т.е. Если в блоке есть просто текст, то он отобразится, но если внутри есть ещё блок, то он не отобразится. Подскажите, пожалуйста, как это исправить? Код ниже:

$(function() {
  $("#people, #days").on("change", function() {
    $(".all-price div, .all-blocks div").hide();
    $("#pr" + $("#people").val() + '-' + $("#days").val()).show();
    $("#bl" + $("#people").val() + '-' + $("#days").val()).show();
  });
});
.podbor {
  display: block;
}

.drop {
  cursor: pointer;
  overflow: hidden;
  display: inline-block;
  position: relative;
  border-radius: 3px;
  padding: 10px;
  outline: 0;
  letter-spacing: .2px;
  border: 1px solid #ecebeb;
}

.all-price {
  font-size: 18px;
  font-weight: bold;
  display: inline-block;
  padding: 10px 20px;
}

.all-price>div {
  display: none
}

.all-blocks {
  width: 300px;
  height: 300px;
  background-color: #f9f9f9;
}

.all-blocks>div {
  display: none
}

#pr2-5, #bl2-5{
  display:block;
}
.1c3d{width:100px;height:50px;background-color:red;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="podbor">
  Для
  <select class="drop" id="people">
    <option value="1">1-го</option>
    <option value="2" selected>2-х</option>
    <option value="s">семьи</option>
  </select>
  на
  <select class="drop" id="days">
    <option value="3">3 дня</option>
    <option value="5" selected>5 дней</option>
  </select>
  <div class="all-price">
    <div id="pr1-3">Цена для 1-го на 3 дня ХХХХХХ</div>
    <div id="pr1-5">Цена для для 1-го на 5 дней ХХХХХХ</div>
    <div id="pr2-3">Цена для 2-х на 3 дня ХХХХХХ</div>
    <div id="pr2-5">Цена для 2-х на 5 дней ХХХХХХ</div>
    <div id="prs-3">Цена для семьи на 3 дня ХХХХХХ</div>
    <div id="prs-5">Цена для семьи на 5 дней ХХХХХХ</div>
  </div>
</div>
<div class="all-blocks">
<div id="bl1-3">Содержимое блока для 1-го на 3 дня</div>
<div id="bl1-5">Содержимое блока для 1-го на 5 дней</div>
<div id="bl2-3">Содержимое блока для 2-х на 3 дня<div class="1c3d">Вот такая Хурма!</div></div>
  <div id="bl2-5">Содержимое блока для 2-х на 5 дней</div>
  <div id="bls-3">Содержимое блока для семьи на 3 дня</div>
  <div id="bls-5">Содержимое блока для семьи на 5 дней</div>
</div>

1 ответ 1

1

Скрывайте только блоки первого уровня.

$(".all-price > div, .all-blocks > div").hide();

$(function() {
  $("#people, #days").on("change", function() {
    $(".all-price > div, .all-blocks > div").hide();
    $("#pr" + $("#people").val() + '-' + $("#days").val()).show();
    $("#bl" + $("#people").val() + '-' + $("#days").val()).show();
  });
});
.podbor {
  display: block;
}

.drop {
  cursor: pointer;
  overflow: hidden;
  display: inline-block;
  position: relative;
  border-radius: 3px;
  padding: 10px;
  outline: 0;
  letter-spacing: .2px;
  border: 1px solid #ecebeb;
}

.all-price {
  font-size: 18px;
  font-weight: bold;
  display: inline-block;
  padding: 10px 20px;
}

.all-price>div {
  display: none
}

.all-blocks {
  width: 300px;
  height: 300px;
  background-color: #f9f9f9;
}

.all-blocks>div {
  display: none
}

#pr2-5, #bl2-5{
  display:block;
}
.1c3d{width:100px;height:50px;background-color:red;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="podbor">
  Для
  <select class="drop" id="people">
    <option value="1">1-го</option>
    <option value="2" selected>2-х</option>
    <option value="s">семьи</option>
  </select>
  на
  <select class="drop" id="days">
    <option value="3">3 дня</option>
    <option value="5" selected>5 дней</option>
  </select>
  <div class="all-price">
    <div id="pr1-3">Цена для 1-го на 3 дня ХХХХХХ</div>
    <div id="pr1-5">Цена для для 1-го на 5 дней ХХХХХХ</div>
    <div id="pr2-3">Цена для 2-х на 3 дня ХХХХХХ</div>
    <div id="pr2-5">Цена для 2-х на 5 дней ХХХХХХ</div>
    <div id="prs-3">Цена для семьи на 3 дня ХХХХХХ</div>
    <div id="prs-5">Цена для семьи на 5 дней ХХХХХХ</div>
  </div>
</div>
<div class="all-blocks">
<div id="bl1-3">Содержимое блока для 1-го на 3 дня</div>
<div id="bl1-5">Содержимое блока для 1-го на 5 дней</div>
<div id="bl2-3">Содержимое блока для 2-х на 3 дня<div class="1c3d">Вот такая Хурма!</div></div>
  <div id="bl2-5">Содержимое блока для 2-х на 5 дней</div>
  <div id="bls-3">Содержимое блока для семьи на 3 дня</div>
  <div id="bls-5">Содержимое блока для семьи на 5 дней</div>
</div>

1
  • Спасибо, большое. Я слишком невнимателен.
    – Newageman
    27 мар 2019 в 20:30

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

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