在JQuery中隐藏和显示ul中的特定元素

Hide and Show specific elements within a ul in JQuery

本文关键字：ul 元素 显示 JQuery 隐藏      更新时间：2023-09-26

根据一些用户输入，我希望向用户显示几个选项（选项可以是从选项-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"/>

基于开始日期和结束日期之间的差异，我展示了上述选项。

1st:您可以使用类似的东西

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

相关文章：