Question

我目前正在制作客户可以购买机票的表格。当他想要购买多张票时，他可以使用输入[type =“number”]字段更改已订购票证的值（最大范围是5）。根据该值，下面显示了其他名称的一些其他（以前隐藏的）字段。

目前我用一些if / else if语句处理了这个问题，但它并没有“感觉正确”。也许任何人都有更好的方法。是的，我是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

上面看起来是正确的。但是你也可以通过编写更少的代码来实现这一点。下面的内容将起作用：

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 2

您可以将代码缩小到：

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

Answer 3

使用以下代码：

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

Answer 4

NumberPicker.on（'change'，function（）{ 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：根据Input [type =“number”]值显示隐藏字段

4 个答案: