根据文本框的输入显示/隐藏 div

Question

我有一个页面，其中有一个文本框询问用户有多少类别 他们想像这样添加：

<div class="col-12-xxxl col-lg-12 col-12 form-group">
    <label>How many SubCategories? *</label>
    <input type="number" placeholder="#" class="form-control" id="SelName">
</div>

使用 jQuery 或 JavaScript，我想根据用户的输入显示/隐藏这些 div 元素；如果 "1" 只显示 div 1，如果 "2" 显示 div 1 和 2 一起，如果 "3" 显示 1,2,3 一起等等。

<div class="col-12-xxxl col-lg-12 col-12 form-group" id="image1">
    <label>SubCategory Name 1:*</label>
    <input type="number" placeholder="#" class="form-control">
</div>
<div class="col-12-xxxl col-lg-12 col-12 form-group" id="image2">
    <label>SubCategory Name 2:*</label>
    <input type="number" placeholder="#" class="form-control">
</div>
<div class="col-12-xxxl col-lg-12 col-12 form-group" id="image3">
    <label>SubCategory Name 3:*</label>
    <input type="number" placeholder="#" class="form-control">
</div>

Answer 1

这是你需要做的：

1. 为所有divs 将它们组合在一起添加一个公共类，我们将其命名为myDivs。
2. 在 ID 为 SelName 的输入上侦听 input 事件。
3. 使用JQuery中的show和hide函数根据输入值控制可见性（默认全部隐藏）。
4. 如果设置了输入值，则遍历divs 并显示其index+1 小于或等于输入值的那些。

$( document ).ready(function(){
     hideAll();
     $('#SelName').on('input', function(){
          let num = $(this).val();
          let divs = $('.myDivs');
          hideAll();
          if(num){
               for(let i = 0; i < divs.length; i++){
                    let div = divs[i];
                    if(i+1 <= num)
                         $(div).show();
               }
          }
     });
     function hideAll(){
          let divs = $('.myDivs');
          for(let i = 0; i < divs.length; i++){
               let div = divs[i];
               $(div).hide();
          }
     }
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

<div class="col-12-xxxl col-lg-12 col-12 form-group">
     <label>How many SubCategories? *</label>
     <input type="number" placeholder="#" class="form-control" id="SelName">
</div>

<div class="col-12-xxxl col-lg-12 col-12 form-group myDivs" id="image1">
     <label>SubCategory Name 1:*</label>
     <input type="number" placeholder="#" class="form-control">
</div>

<div class="col-12-xxxl col-lg-12 col-12 form-group myDivs" id="image2">
     <label>SubCategory Name 2:*</label>
     <input type="number" placeholder="#" class="form-control">
</div>

<div class="col-12-xxxl col-lg-12 col-12 form-group myDivs" id="image3">
     <label>SubCategory Name 3:*</label>
     <input type="number" placeholder="#" class="form-control">
</div>

Answer 2

我建议为所有子类别添加一个类名，例如subcategory，并将所有子类别设置为display:none; 然后您可以执行以下操作：

$("#SelName").on("change", function() {
  let count = $(this).val();
  let subcategories = $(".subcategory");
  for (let i = 0; i <= subcategories.length; i++) {
    if (i + 1 <= count) {
      $(".subcategory:eq(" + i + ")").show();
    } else {
      $(".subcategory:eq(" + i + ")").hide();
    }
  }
});

.subcategory {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-12-xxxl col-lg-12 col-12 form-group">
  <label>How many SubCategories? *</label>
  <input type="number" placeholder="#" class="form-control" id="SelName">
</div>
<div class="col-12-xxxl col-lg-12 col-12 form-group subcategory" id="image1">
  <label>SubCategory Name 1:*</label>
  <input type="number" placeholder="#" class="form-control">
</div>
<div class="col-12-xxxl col-lg-12 col-12 form-group subcategory" id="image2">
  <label>SubCategory Name 2:*</label>
  <input type="number" placeholder="#" class="form-control">
</div>
<div class="col-12-xxxl col-lg-12 col-12 form-group subcategory" id="image3">
  <label>SubCategory Name 3:*</label>
  <input type="number" placeholder="#" class="form-control">
</div>

Answer 3

如果你用显示/隐藏来做，你只有有限的数字。您可以改为创建一个循环并根据用户需要创建尽可能多的输入。看看我下面的例子：

$(".form-control").on("change", function(){
var inputVal = $(".form-control").val();
$(".sub-cats").html("");
for (i = 1; i <= inputVal; i++){
 $(".sub-cats").append('<div class="col-12-xxxl col-lg-12 col-12 form-group" id="image' + i +'"><label>SubCategory Name '+i+':*</label><input type="number" placeholder="#" class="form-control"></div>');
}
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-12-xxxl col-lg-12 col-12 form-group">
  <label>How many SubCategories? *</label>
  <input type="number" placeholder="#" class="form-control" id="SelName">
</div>
<div class="sub-cats">
</div>