Скрыть и отобразить определенные элементы внутри ul в JQuery

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

первый: вы можете использовать что-то вроде

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

В основном, в вашем яваскрипта кода, вы бы выбрать вариант, который вы хотите отобразить пользователь, и сделать что-то вроде этого:

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