показать / скрыть div с идентификатором, указанным в форме ввода

Question

Я получил много div на странице с такими идентификаторами:

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

По умолчанию все эти div скрыты. Есть форма для ввода текста. Пользователь вводит что-то вроде s005 в textarea и div с id = s005. Если следующий ввод s101 - становится видимым только div s101 и div s005 снова скрывается. Если ввод - нет div с идентификатором, указанным в textarea - мы просто ничего не выводим.

Так что мне нужно применять и удалять классы из моих 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

Вот пример, который работает.Единственное, чего не происходит, - это вызова функции addOrRemove.

http://jsfiddle.net/pVEus/

Надеюсь, это поможет вам начать работу.

Боб

Answer 2

Попробуйте следующее (обратите внимание, я также дал вашему текстовому полю идентификатор, чтобы он не взрывался, когда на экране есть другие текстовые поля):

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

Answer 3

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

Должен сделать трюк