Question

抱歉格式不佳。我正在移动。

您好

我只是想知道如何将以下函数转换为循环？

目前，我只是一遍又一遍地重复同样的事情。我有一个文本框ID，从“example1”到“example30”。所以有30个文本框。还有一个下拉列表

值为1-30。如果我从下拉列表中选择“5”，则应显示5个文本框并隐藏其余部分。

我目前有这个：

（文档）$。就绪（函数（）{

$('#containers').on('change', function() {

if (this.value == '1'){

                            $(".Container1").show();

            $('.Container2').hide();$('.Container3').hide();$('.Container4').hide();$('.Container5').hide();$('.Container6').hide();$('.Container7').hide();$('.Container8').hide();$('.Container9').hide();$('.Container10').hide();$('.Container11').hide();$('.Container12').hide();$('.Container13').hide();$('.Container14').hide();$('.Container15').hide();$('.Container16').hide();$('.Container17').hide();$('.Container18').hide();$('.Container19').hide();$'.Container20').hide();$('.Container21').hide();$('.Container22').hide();$('.Container23').hide();$('.Container24').hide();$('.Container25').hide();$('.Container26').hide();$('.Container27').hide();$('.Container28').hide();$('.Container29').hide();$('.Container30').hide();

} 

            else if (this.value == '2'){

                            $(".Container1").show();

                            $(".Container2").show();

            $('.Container3').hide();$('.Container4').hide();$('.Container5').hide();$('.Container6').hide();$('.Container7').hide();$('.Container8').hide();$('.Container9').hide();$('.Container10').hide();$('.Container11').hide();$('.Container12').hide();$('.Container13').hide();$('.Container14').hide();$('.Container15').hide();$('.Container16').hide();$('.Container17').hide();$('.Container18').hide();$('.Container19').hide();$'.Container20').hide();$('.Container21').hide();$('.Container22').hide();$('.Container23').hide();$('.Container24').hide();$('.Container25').hide();$('.Container26').hide();$('.Container27').hide();$('.Container28').hide();$('.Container29').hide();$('.Container30').hide();

            }

            else if (this.value == '3'){

                            $(".Container1").show();

                            $(".Container2").show();

                            $(".Container3").show();

            $('.Container4').hide();$('.Container5').hide();$('.Container6').hide();$('.Container7').hide();$('.Container8').hide();$('.Container9').hide();$('.Container10').hide();$('.Container11').hide();$('.Container12').hide();$('.Container13').hide();$('.Container14').hide();$('.Container15').hide();$('.Container16').hide();$('.Container17').hide();$('.Container18').hide();$('.Container19').hide();$'.Container20').hide();$('.Container21').hide();$('.Container22').hide();$('.Container23').hide();$('.Container24').hide();$('.Container25').hide();$('.Container26').hide();$('.Container27').hide();$('.Container28').hide();$('.Container29').hide();$('.Container30').hide();

            }

            else if (this.value == '4'){

                            $(".Container1").show();

                            $(".Container2").show();

                            $(".Container3").show();

                            $(".Container4").show();

            $('.Container5').hide();$('.Container6').hide();$('.Container7').hide();$('.Container8').hide();$('.Container9').hide();$('.Container10').hide();$('.Container11').hide();$('.Container12').hide();$('.Container13').hide();$('.Container14').hide();$('.Container15').hide();$('.Container16').hide();$('.Container17').hide();$('.Container18').hide();$('.Container19').hide();$'.Container20').hide();$('.Container21').hide();$('.Container22').hide();$('.Container23').hide();$('.Container24').hide();$('.Container25').hide();$('.Container26').hide();$('.Container27').hide();$('.Container28').hide();$('.Container29').hide();$('.Container30').hide();

            }

            else if (this.value == '5'){

                            $(".Container1").show();

                            $(".Container2").show();

                            $(".Container3").show();

                            $(".Container4").show();

                            $(".Container5").show();

            $('.Container6').hide();$('.Container7').hide();$('.Container8').hide();$('.Container9').hide();$('.Container10').hide();$('.Container11').hide();$('.Container12').hide();$('.Container13').hide();$('.Container14').hide();$('.Container15').hide();$('.Container16').hide();$('.Container17').hide();$('.Container18').hide();$('.Container19').hide();$'.Container20').hide();$('.Container21').hide();$('.Container22').hide();$('.Container23').hide();$('.Container24').hide();$('.Container25').hide();$('.Container26').hide();$('.Container27').hide();$('.Container28').hide();$('.Container29').hide();$('.Container30').hide();

            }

            });

正如您所看到的，这是一种可怕的方法。坦率地说，这很令人尴尬。我已经尝试了循环，但无法弄明白

Answer 1

如果您可以更改HTML，那么最好在所有文本框中添加一个公共类，如common，然后执行此操作，

$('#containers').on('change', function() {
        $('.common').hide();
        let x = $(this).val();
        for(var s = 0  ; s < x ; s++)
            $($('.common')[s]).show();

});

如果你不能编辑html，请执行此操作，

$('#containers').on('change', function() {
        $('input[id^="example"]').hide();
        let x = $(this).val();
        for(var s = 0  ; s < x ; s++)
            $('#example'+ (s+1)).show();

});

编辑：如果您需要参考文件链接

https://jsfiddle.net/wfgvvpv9/

Answer 2

Pure js解决方案;我用了5个输入框;请将其扩展到30（根据您的情况）

document.getElementById("dropDown").onchange = showHideInputBoxes;

function showHideInputBoxes() {
   let chosenValue = document.getElementById("dropDown").value;
   let allInputBoxes = document.getElementsByTagName("input");
   for(i=0;i<allInputBoxes.length;i++) {
      let inputBoxId = allInputBoxes[i].getAttribute('id');
   		if(inputBoxId<=chosenValue) {
        allInputBoxes[i].classList.add('hide');
      }
      else {
         allInputBoxes[i].classList.remove('hide');
      }
   }
}

.hide {
  display:none;
}

<input id="1" type="text" value = "text of inputbox 1">
<input id="2" type="text" value = "text of inputbox 2">
<input id="3" type="text" value = "text of inputbox 3">
<input id="4" type="text" value = "text of inputbox 4">
<input id="5" type="text" value = "text of inputbox 5">

<select id="dropDown">
<option id="option-choose">choose num</option>
<option id="option-1">1</option>
<option id="option-2">2</option>
<option id="option-3">3</option>
<option id="option-4">4</option>
<option id="option-5">5</option>
</select>

Answer 3

<select id="containers">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
  <option value="6">6</option>
  <option value="7">7</option>
  <option value="8">8</option>
  <option value="9">9</option>
  <option value="10">10</option>
  <option value="11">11</option>
  <option value="12">12</option>
  <option value="13">13</option>
  <option value="14">14</option>
  <option value="15">15</option>
  <option value="16">16</option>
  <option value="17">17</option>
  <option value="18">18</option>
  <option value="19">19</option>
  <option value="20">20</option>
  <option value="21">21</option>
  <option value="22">22</option>
  <option value="23">23</option>
  <option value="24">24</option>
  <option value="25">25</option>
  <option value="26">26</option>
  <option value="27">27</option>
  <option value="28">28</option>
  <option value="29">29</option>
  <option value="30">30</option>
</select>

<div id='input-containers' style="display:none;">
  <input type="text" class="input-containers Container1" value="Container1">
  <input type="text" class="input-containers Container2" value="Container2">
  <input type="text" class="input-containers Container3" value="Container3">
  <input type="text" class="input-containers Container4" value="Container4">
  <input type="text" class="input-containers Container5" value="Container5">
  <input type="text" class="input-containers Container6" value="Container6">
  <input type="text" class="input-containers Container7" value="Container7">
  <input type="text" class="input-containers Container8" value="Container8">
  <input type="text" class="input-containers Container9" value="Container9">
  <input type="text" class="input-containers Container10" value="Container10">
  <input type="text" class="input-containers Container11" value="Container11">
  <input type="text" class="input-containers Container12" value="Container12">
  <input type="text" class="input-containers Container13" value="Container13">
  <input type="text" class="input-containers Container14" value="Container14">
  <input type="text" class="input-containers Container15" value="Container15">
  <input type="text" class="input-containers Container16" value="Container16">
  <input type="text" class="input-containers Container17" value="Container17">
  <input type="text" class="input-containers Container18" value="Container18">
  <input type="text" class="input-containers Container19" value="Container19">
  <input type="text" class="input-containers Container20" value="Container20">
  <input type="text" class="input-containers Container21" value="Container21">
  <input type="text" class="input-containers Container22" value="Container22">
  <input type="text" class="input-containers Container23" value="Container23">
  <input type="text" class="input-containers Container24" value="Container24">
  <input type="text" class="input-containers Container25" value="Container25">
  <input type="text" class="input-containers Container26" value="Container26">
  <input type="text" class="input-containers Container27" value="Container27">
  <input type="text" class="input-containers Container28" value="Container28">
  <input type="text" class="input-containers Container29" value="Container29">
  <input type="text" class="input-containers Container30" value="Container30">
</div>


$(document).ready(function() {

  function hideAllContainers() {
    //put common class for all containers
    $(".input-containers").hide();
    $("#input-containers").show();
  }

  $('#containers').on('change', function() {

    hideAllContainers();
    var count = parseInt(this.value);

    for (i = 1; i <= count; i++) {
    console.log($(".Container" + i));
      $(".Container" + i).show();
    }
  });
});

可以找到jsfiddle here

根据选定的下拉值隐藏/显示循环？

3 个答案: