Question

我在页面上有很多div，其中包含以下ID：

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

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

所以我需要从我的div中应用和删除类，但我不确定如何 - 使用addClass或toggleClass 我是jQuery的新手，但是我对这个案例进行了研究并得出了这些：

头：

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

体：

<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

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

应该做的伎俩

Answer 2

这是一个有效的例子。唯一没有发生的是调用函数'addOrRemove'。

http://jsfiddle.net/pVEus/

希望这能让你开始。

鲍勃

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>

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

3 个答案: