afficher/cacher div id spécifié sous forme d'entrée

Question

j'ai eu beaucoup de divs à la page avec ids comme ceux-ci:

<div id="s001">, <div id="s002">, <div id="s003">....<div id="s050">...<div id="s200"> 

Par défaut, tous ces divs sont cachés. Il existe un formulaire de saisie de texte. L'utilisateur tape quelque chose comme s005 dans textarea et div avec id = s005 apparaissent. Si l'entrée suivante est s101 - seul div s101 devient visible et div s005 est masqué à nouveau. Si l'entrée est là, il n'y a pas de div avec id spécifié dans textarea - nous ne restons rien.

donc j'ai besoin d'appliquer et de supprimer des classes de mes divs, mais je ne sais pas comment - avec ou addClass toggleClass Je suis assez nouveau pour jQuery, mais je fait des recherches pour ce cas et trouver ceux-ci:

tête:

<style type="text/css"> 
      .hidden { display: none } 
      .shown { display: block } 
</style> 

corps

:

<input type="text" size="4"> 
<script> 
    $("input").keyup(function() { 
     var value = $(this).val(); 
     $(#value).toggleClass("shown", addOrRemove);    
    }).keyup(); 
</script> 

<div id="s001" class="hidden">s001 contents</div> 
<div id="s002" class="hidden">s002 contents</div> 
<div id="s003" class="hidden">s003 contents</div> 
<div id="s004" class="hidden">s004 contents</div> 
<div id="s005" class="hidden">s005 contents</div> 

Je suis sûr que cette chaîne est mauvaise:

$(#value).toggleClass("shown", addOrRemove);    

Mais je n'ai aucune idée de ce que je devrais changer. Je crois que la comlication principale est que la classe shown doit être supprimée après que le texte dans le formulaire d'entrée soit changé. Une seule div doit être affichée en même temps! remercie tout le monde à l'avance et désolé d'être Noob.

Answer 1

Voici un exemple qui fonctionne. La seule chose qui ne se passe pas est l'appel à la fonction 'addOrRemove'.

http://jsfiddle.net/pVEus/

Hope this vous permet de démarrer.

Bob

Answer 2

$("#"+value).toggleClass("shown", addOrRemove); 

devrait faire l'affaire

Answer 3

Essayez le suivant (avis j'ai aussi donné votre identifiant un champ de saisie si cela ne souffle pas quand vous avez d'autres champs de saisie sur l'écran):

<input type="text" id="idToShow" size="4"> 
<script> 
$(document).ready(function() { 
    $("#idToShow").keyup(function() { 

     //hide the currently shown div 
     $('div.shown').removeClass('shown').addClass('hidden'); 

     //show the div with id entered in textbox 
     var value = $(this).val(); 
     $('#' + value).removeClass('hidden').addClass('shown'); 

    }).keyup(); 
} 
</script>