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の書き換えまたは各ユーザーが入力する（私はいくつかの要素を表示し、他の人を隠す必要があります）。 これを実現する方法は他にありますか？おかげさまで

EDITED：ユーザーからの入力：、開始日と終了日の間diffrenceに基づいて

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

のようなものを使用することができます3210

第二：あなたは、あなたが何をしてからのユーザ入力を収集し、テキスト入力、select要素されている

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

1つのきれいな方法は、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; 
}