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"/>

根据from和to日期之间的差异，我展示了上述选项。

Answer 1

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>

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

1 个答案: