显示/隐藏输入表单中指定 id 的 div

Question

我在页面上有很多带有如下 id 的 div：

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

默认情况下，所有这些 div 都是隐藏的。 有文本输入表格。用户在文本区域中输入类似 s005 的内容，并且出现 id=s005 的 div。如果下一个输入是 s101 — 只有 div s101 变得可见，div s005 再次隐藏。如果输入没有在 textarea 中指定 id 的 div — 我们只是不显示任何内容。

所以我需要从我的 div 中应用和删除类，但我不确定如何使用 addClass 或toggleClass 我对 jQuery 很陌生，但我对这种情况进行了研究并提出了这些：

head:

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

body:

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

我确信这个字符串是错误的：

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

但我不知道我应该更改什么。我认为主要的复杂性是在输入表单中的文本更改后必须删除 shown 类。一次只能显示一个div！ 提前感谢大家，很抱歉成为菜鸟。

Answer 1

这是一个正在运行的示例。唯一没有发生的是对函数“addOrRemove”的调用。

http://jsfiddle.net/pVEus/

希望这可以帮助您入门。

鲍勃

Answer 2

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

应该做的伎俩

Answer 3

尝试以下操作（请注意，我还为您的文本框提供了一个 id，这样当屏幕上有其他文本框时，它就不会爆炸）：

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