jQuery：顯示隱藏字段取決於輸入[type =「number」]值

我目前正在制定一個表格，客戶可以購買一張票。當他想要購買多張票時，他可以通過輸入[type =「number」]字段（最大範圍是5）來更改已訂購票的價值。取決於該值，附加名稱的一些額外（以前隱藏）字段顯示在下面。jQuery：顯示隱藏字段取決於輸入[type =「number」]值

目前我用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(); 
    } 
});

謝謝

來源

2015-10-19 Steve

請問您可以分享您的HTML嗎？ – vijayP

您可以將代碼縮小到：

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

來源

2015-10-19 12:13:07

不錯。工作。謝謝。但你能否解釋一下「？」和這個上下文中的「：」符號？ – Steve

這是'If..Else'，一個班輪的短標籤。 – deepakb

使用以下代碼：

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

來源

2015-10-19 12:13:39

作爲OP代碼，我認爲你應該使用<而不是<= –

也適用於第三:)。也謝謝 – Steve

@ Mohamed-Yousef，不會，因爲如果'valueNumberPicker = 1'那麼循環將不會執行，如果它已經爲0，那麼你的條件將是正確的 –

上面看起來正確。但是你可以通過編寫更少的代碼來做到這一點。類似下面將作品：

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(); 
    } 
});

來源

2015-10-19 12:13:54 deepakb

尼斯。也工作:)。也謝謝你 – Steve

-1

NumberPicker.on（ '變更'，函數（）{ 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"); 
}

}）;

來源

2015-10-19 12:27:36

jQuery：顯示隱藏字段取決於輸入[type =「number」]值

回答

相關問題