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

Question

抱歉，格式不正确。我在移动设备上。

你好

我只是想知道如何将以下函数放入循环中？

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

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

我目前有这个:

$(文档).ready(函数(){

$('#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，那么最好向所有文本框添加一个公共(public)类，例如 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/