javascript - 根据文本框的输入显示/隐藏 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>

标签： javascripthtmljquerycss

Answer 1

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

$(".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>