javascript - 在 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

第一:你可以使用类似的东西

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