在JQuery中的ul中隱藏和顯示特定元素

Question

根據一些用戶輸入，我希望向用戶顯示幾個選項（這些選項可以是從選項1到選項5的單個或多個選項，也可以只是錯誤）

我的HTML代碼是：

<input id="optiondisplay" value="Options" readonly/>
<ul id="option-list">
    <li id="option-1">Option 1</li>
    <li id="option-2">Option 2</li>
    <li id="option-3">Option 3</li>
    <li id="option-4">Option 4</li>
    <li id="option-5">Option 5</li>
    <li id="option-error"><b>Error: Invalid input.</b></li>
</ul>

現在，我正在使用下面的jQuery代碼來顯示選項：

case (some input)
                $('#optiondisplay').show();
                $('#option-error').hide();
                $('#option-1').hide();
                $('#option-2').hide();
                $('#option-3').hide();
                $('#option-4').show();
                $('#option-5').show();
                break;

但是，正如大家在這里可以看到的那樣，每個用戶輸入都有很多代碼重寫（我必須顯示一些元素，還隱藏其他元素）。 我還有其他方法可以實現這一目標嗎？ 謝謝。

編輯：來自用戶的輸入 ：

<input type="text" id="from-datepicker"/>
<input type="text" id="to-datepicker"/>

基於起始日期和結束日期之間的差異，我顯示了以上選項。

Answer 1

1：您可以使用類似

$('#option-1 ,#option-2 , #option-3').hide();
$('#option-4 , #option-5').show();

第二：您可以使用簡單的功能根據需要顯示和隱藏選項

 $(document).ready(function(){ // run function with array of options you need to show // make this array as you like [0,2] or [3,5] up to you // the index starts from 0 OptionsShowHide([0,3]) }); // function to show what li we need and hide others function OptionsShowHide(arr){ $('li[id^="option-"]').each(function(i){ if($.inArray( i , arr) > -1){ $(this).show(); }else{ $(this).hide(); } }); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input id="optiondisplay" value="Options" readonly/> <ul id="option-list"> <li id="option-1">Option 1</li> <li id="option-2">Option 2</li> <li id="option-3">Option 3</li> <li id="option-4">Option 4</li> <li id="option-5">Option 5</li> <li id="option-error"><b>Error: Invalid input.</b></li> </ul>