jQuery：根据输入 [type="number"] 值显示隐藏字段

Question

我目前正在制作一种客户可以买票的表格。当他想购买不止一张票时，他可以通过输入 [type="number"] 字段（最大范围为 5）更改已订购票的值。根据该值，下面会显示一些附加名称的附加（以前隐藏的）字段。

目前我用一些 if/else if 语句来处理这个问题，但是 "feel right" 不是那样的。也许任何人都有更好的方法。是的，我是 Jquery 的新手 :) 这是我现在使用的代码：

var valueNumberPicker;
var NumberPicker = $('.selectboxvaluekongress input');
var theFieldsKongress = $('.hiddenContactField');
theFieldsKongress.hide();

NumberPicker.on('change', function(){
    valueNumberPicker = NumberPicker.val();

    if (valueNumberPicker == 2){
        $('#hiddenField1').show();
    }
    else if (valueNumberPicker == 3) {
        $('#hiddenField1').show();
        $('#hiddenField2').show();
    }
    else if (valueNumberPicker == 4) {
        $('#hiddenField1').show();
        $('#hiddenField2').show();
        $('#hiddenField3').show();
    }
    else if (valueNumberPicker == 5) {
        $('#hiddenField1').show();
        $('#hiddenField2').show();
        $('#hiddenField3').show();
        $('#hiddenField4').show();
    }
});

谢谢

Answer 1

您可以将代码缩小到：

NumberPicker.on('change', function(){
 valueNumberPicker = NumberPicker.val();
 valueNumberPicker > 4 ? $('[id^=hiddenField]').show() : $('#hiddenField'+valueNumberPicker).show();
});

Answer 2

使用以下代码：

NumberPicker.on('change', function(){
 valueNumberPicker = NumberPicker.val();
    for (var i = 1;i<=valueNumberPicker ;i++)
    {
    var id = "#hiddenField"+i;
    $(id).show();
    }
}

Answer 3

以上看起来正确。但是您也可以通过编写更少的代码来做到这一点。像下面这样的东西会起作用：

var valueNumberPicker;
var NumberPicker = $('.selectboxvaluekongress input');
var theFieldsKongress = $('.hiddenContactField');
theFieldsKongress.hide();

NumberPicker.on('change', function(){
    valueNumberPicker = NumberPicker.val();

    for(var i=1;i<valueNumberPicker;i++) {
        $('#hiddenField' + i).show();
    }
});

Answer 4

NumberPicker.on('change', 函数(){ valueNumberPicker = NumberPicker.val();

if (valueNumberPicker == 2){
    $('#hiddenField1').prop("type", "Number");
}
else if (valueNumberPicker == 3) {
    $('#hiddenField1').prop("type", "Number");
    $('#hiddenField2').prop("type", "Number");
}
else if (valueNumberPicker == 4) {
    $('#hiddenField1').prop("type", "Number");
    $('#hiddenField2').prop("type", "Number");
    $('#hiddenField3').prop("type", "Number");
}
else if (valueNumberPicker == 5) {
    $('#hiddenField1').prop("type", "Number");
    $('#hiddenField2').prop("type", "Number");
    $('#hiddenField3').prop("type", "Number");
    $('#hiddenField4').prop("type", "Number");
}

});

jQuery：根据输入 [type="number"] 值显示隐藏字段

jQuery: Showing hidden fields depending on Input [type="number"] value

jquery

user-input