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

但是，大家都可以在這裏看到，有很多重寫代碼f或每個用戶輸入（我必須顯示一些元素，也隱藏其他元素）。 有沒有其他辦法可以達到這個目標？ 謝謝。

編輯：來自用戶的輸入：

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

Answer 2

一個很好的方法是使用css選擇器來隱藏元素。基本上，你設置一個標記（一個類，或一個數據屬性等），然後使用派生選擇器:not來獲得你想要的行爲。這裏有一個的jsfiddle：https://jsfiddle.net/m3316pqj/

基本上，在你的JavaScript代碼，你會選擇要顯示給用戶，這樣做的選項：

function showOption(number) { 
    $('#option-list li').removeClass('show-me'); // remove any old markers 
    $('#option-list').find('#option-' + number) 
     .addClass('show-me'); // Set the new one 
} 

然後讓你的CSS做艱苦的工作：

#option-list :not(.show-me) { 
    display: none; 
}