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

2：您可以使用一个简单的函数来显示和隐藏所需的选项

​

$(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>

​