Элементы слайдов с помощью .slide()

ProgramBox

Элементы слайдов с помощью .slide()

Post author:admin
Запись опубликована:30 октября, 2022
Post category:Вопросы по программированию

#javascript #jquery

#javascript #jquery ( jquery )

Вопрос:

Я создал <select> число от 1 до 5 и , основываясь на выбранном мною числе , хотел бы показать другое <select> .

Например, у меня есть поле выбора дочерних элементов от 1 до 5 и выберите 5 с указанием возраста каждого отдельного дочернего элемента. Если вы выберете 3 ребенка, я хочу, чтобы появилось 3 поля для выбора индивидуального возраста каждого ребенка.

Я создал следующий код, но он не работает. Можете ли вы помочь мне понять, что я сделал не так? Спасибо

 $(document).ready(function() {
  var valore = $('#bimbi').val();
  
  if (valore == 1) {
    $("#etbimbo1").slideDown();
  }
  if (valore == 2) {
    $("#etbimbo1").slideDown();
    $("#etbimbo2").slideDown();
  }
  if (valore == 3) {
    $("#etbimbo1").slideDown();
    $("#etbimbo2").slideDown();
    $("#etbimbo3").slideDown();
  }
  if (valore == 4) {
    $("#etbimbo1").slideDown();
    $("#etbimbo2").slideDown();
    $("#etbimbo3").slideDown();
    $("#etbimbo4").slideDown();
  }
});

 #etbimbo1,
#etbimbo2,
#etbimbo3,
#etbimbo4 {
  display: none;
}

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<div id="flip">
  <select name="bambini" id="bimbi">
    <option value="1" id="bmb1">1</option>
    <option value="2" id="bmb2">2</option>
    <option value="3" id="bmb3">3</option>
    <option value="4" id="bmb4">4</option>
  </select>
</div>
<select name="bambini" id="etbimbo1" class="bm">
  <option value="bimbo1" id="bmb1">0-5 anni(1)</option>
  <option value="bimbo2" id="bmb2">6-12 anni</option>
</select>
<select name="bambini" id="etbimbo2" class="bm">
  <option value="bimbo1" id="bmb1">0-5 anni(2)</option>
  <option value="bimbo2" id="bmb2">6-12 anni</option>
</select>
<select name="bambini" id="etbimbo3" class="bm">
  <option value="bimbo1" id="bmb1">0-5 anni(3)</option>
  <option value="bimbo2" id="bmb2">6-12 anni</option>
</select>
<select name="bambini" id="etbimbo4" class="bm">
  <option value="bimbo1" id="bmb1">0-5 anni()</option>
  <option value="bimbo2" id="bmb2">6-12 anni</option>
</select>

1. что вы подразумеваете под слайдом? Вы хотите сделать select видимым на основе того, какое число вы выбираете в первом выпадающем списке?

2. Точнее, я хочу показать выбор в зависимости от количества дочерних элементов

Ответ №1:

Вам нужно привязать свой код к change событию select , чтобы он выполнялся при выборе опции:

 $(document).ready(function() {
  $('#bimbi').on('change', e => {
    var valore = parseInt($(e.target).val(), 10) || 0;

    if (valore == 1) {
      $("#etbimbo1").slideDown();
    }
    if (valore == 2) {
      $("#etbimbo1").slideDown();
      $("#etbimbo2").slideDown();
    }
    if (valore == 3) {
      $("#etbimbo1").slideDown();
      $("#etbimbo2").slideDown();
      $("#etbimbo3").slideDown();
    }
    if (valore == 4) {
      $("#etbimbo1").slideDown();
      $("#etbimbo2").slideDown();
      $("#etbimbo3").slideDown();
      $("#etbimbo4").slideDown();
    }
  });
});

 #etbimbo1,
#etbimbo2,
#etbimbo3,
#etbimbo4 {
  display: none;
}

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<div id="flip">
  <select name="bambini" id="bimbi">
    <option value="1" id="bmb1">1</option>
    <option value="2" id="bmb2">2</option>
    <option value="3" id="bmb3">3</option>
    <option value="4" id="bmb4">4</option>
  </select>
</div>
<select name="bambini" id="etbimbo1" class="bm">
  <option value="bimbo1" id="bmb1">0-5 anni(1)</option>
  <option value="bimbo2" id="bmb2">6-12 anni</option>
</select>
<select name="bambini" id="etbimbo2" class="bm">
  <option value="bimbo1" id="bmb1">0-5 anni(2)</option>
  <option value="bimbo2" id="bmb2">6-12 anni</option>
</select>
<select name="bambini" id="etbimbo3" class="bm">
  <option value="bimbo1" id="bmb1">0-5 anni(3)</option>
  <option value="bimbo2" id="bmb2">6-12 anni</option>
</select>
<select name="bambini" id="etbimbo4" class="bm">
  <option value="bimbo1" id="bmb1">0-5 anni()</option>
  <option value="bimbo2" id="bmb2">6-12 anni</option>
</select>

Сделав еще один шаг, вы можете улучшить код, создав цикл, который повторяется N раз для выбранного количества дочерних элементов и клонирует select:

 $(document).ready(function() {
  $('#bimbi').on('change', e => {
    var valore = parseInt($(e.target).val(), 10) || 0;
    $('select.bm:visible').remove();
    
    for (var i = 0; i < valore; i  ) {
      $('.bm-template').clone().removeClass('bm-template').insertAfter(e.target);
    }
  });
});

 .bm-template {
  display: none;
}

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<div id="flip">
  <select name="bambini" id="bimbi">
    <option value="1" id="bmb1">1</option>
    <option value="2" id="bmb2">2</option>
    <option value="3" id="bmb3">3</option>
    <option value="4" id="bmb4">4</option>
  </select>
</div>

<select name="bambini" class="bm bm-template">
  <option value="bimbo1">0-5 anni(1)</option>
  <option value="bimbo2">6-12 anni</option>
</select>

1. Я не могу повторить это — он отлично работает во фрагменте, который я предоставил в вопросе.

2. Хорошо, я должен начать учебные циклы, я не умею работать с кодом, я начал изучать его 6 месяцев назад

3. С циклом, если я вставлю много людей, код будет таким же, это правда?

Ответ №2:

Попробуйте это:

 $('#bimbi').change(function() {
  var valore = $('#bimbi').val();
  
  if (valore == 1) {
    $("#etbimbo2").slideUp();
    $("#etbimbo3").slideUp();
    $("#etbimbo4").slideUp();
    $("#etbimbo1").slideDown();
  }
  if (valore == 2) {
    $("#etbimbo3").slideUp();
    $("#etbimbo4").slideUp();
    $("#etbimbo1").slideDown();
    $("#etbimbo2").slideDown();
  }
  if (valore == 3) {
    $("#etbimbo4").slideUp();
    $("#etbimbo1").slideDown();
    $("#etbimbo2").slideDown();
    $("#etbimbo3").slideDown();
  }
  if (valore == 4) {
    $("#etbimbo1").slideDown();
    $("#etbimbo2").slideDown();
    $("#etbimbo3").slideDown();
    $("#etbimbo4").slideDown();
  }
});

 #etbimbo1,
#etbimbo2,
#etbimbo3,
#etbimbo4 {
  display: none;
}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="flip">
  <select name="bambini" id="bimbi">
    <option value="1" id="bmb1">1</option>
    <option value="2" id="bmb2">2</option>
    <option value="3" id="bmb3">3</option>
    <option value="4" id="bmb4">4</option>
  </select>
</div>
<select name="bambini" id="etbimbo1" class="bm">
  <option value="bimbo1" id="bmb1">0-5 anni(1)</option>
  <option value="bimbo2" id="bmb2">6-12 anni</option>
</select>
<select name="bambini" id="etbimbo2" class="bm">
  <option value="bimbo1" id="bmb1">0-5 anni(2)</option>
  <option value="bimbo2" id="bmb2">6-12 anni</option>
</select>
<select name="bambini" id="etbimbo3" class="bm">
  <option value="bimbo1" id="bmb1">0-5 anni(3)</option>
  <option value="bimbo2" id="bmb2">6-12 anni</option>
</select>
<select name="bambini" id="etbimbo4" class="bm">
  <option value="bimbo1" id="bmb1">0-5 anni()</option>
  <option value="bimbo2" id="bmb2">6-12 anni</option>
</select>