Блог

Главная - Вопросы по программированию - Как отобразить текст при нажатии на переключатель

Как отобразить текст при нажатии на переключатель

#jquery #input #hide #show

#jquery #ввод #скрыть #показать

Вопрос:

Моя цель — создать скрипт, который будет отображать разные абзацы на странице, в зависимости от того, какой переключатель нажат. Первый этап заключается в создании скрипта, который будет просто отображать один фрагмент текста при нажатии на одну из кнопок. Из чтения об этом следует, что вы должны быть в состоянии определить, какая кнопка нажата, используя идентификатор элемента ввода и ‘проверено. Обратите внимание, что я предполагаю полагаться на идентификаторы, чтобы знать, какой текст показывать. Однако следующий код не работает, и, будучи новичком, я изо всех сил пытаюсь понять, чего не хватает. Обратите внимание, что для того, что вначале кажется более простым подходом, я показываю текст на странице, а затем хочу, чтобы текст скрывался при нажатии кнопки.

Сценарий является

 <script type="text/javascript">
    $(document).ready(function() {
    if($('input:checked #category1')) {
        $("#hideCategory1").hide();
            };
        });

Раздел ввода является:

       <form name="categories" action="" method="post">
  <h2>Categories
  </h2>
  <p><input name="category" type="radio" value="errorInText" id="category1" />Content</p>
  <p><input name="category" type="radio" value="errorInDesign" id="category2" />Design Problem</p>
  <p><input name="category" type="radio" value="brokenLink" id="category3" />Broken Link</p>
  </form>

CSS — это

 #hideCategory1 {
visibility: visible;

}

Текстовый раздел является

 <p id="hideCategory1" class="hidden">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam  ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo  porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis  ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean  sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p>

Я был бы признателен за любые указания на то, почему это может привести к сбою и как это исправить.

Обратите внимание, что когда я запускал это, я ожидал использовать «изменить», чтобы определить, какая кнопка была нажата. Тем не менее, я читал в нескольких местах, что функция «изменить» иногда имеет проблемы с IE — но я не знаю.

Спасибо

ОБНОВЛЕНИЕ: Основываясь на ответе Эдгара, я изменил процесс и добавил еще одну строку, которая сбрасывает весь текст на скрытый при нажатии переключателя. Первоначальные тесты показывают, что это работает так, как ожидалось.

 $(document).ready(function() {
  $("#hideCategory1, #hideCategory2, #hideCategory3").hide(); //Hide all forms
$(":radio[name='category']").click(function(){
  $("#hideCategory1, #hideCategory2, #hideCategory3").hide();//on click rehide all the forms
   switch($(this).attr("id")){//Select the form based on the radio button that was clicked.
      case "category1": $("#hideCategory1").show(); break;
      case "category2": $("#hideCategory2").show(); break;
      case "category3": $("#hideCategory3").show(); break;
   }
 });
});

Спасибо.

Ответ №1:

Я не понял, хотите ли вы показать или скрыть абзацы. В любом случае, этот код скрывает абзац, соответствующий нажатой радиокнопке. Здесь у вас есть:

 <html>
<body>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
   $(":radio[name='category']").click(function(){
       $("#hideCategory1, #hideCategory2, #hideCategory3").show(); //Show all paragraphs first.
       switch($(this).attr("id")){
          case "category1": $("#hideCategory1").hide(); break;
          case "category2": $("#hideCategory2").hide(); break;
          case "category3": $("#hideCategory3").hide(); break;        
       }
   });
});
</script>

<form name="categories" action="" method="post">
  <h2>Categories
  </h2>
  <p><input name="category" type="radio" value="errorInText" id="category1" />Content</p>
  <p><input name="category" type="radio" value="errorInDesign" id="category2" />Design Problem</p>
  <p><input name="category" type="radio" value="brokenLink" id="category3" />Broken Link</p>
</form>
  <p id="hideCategory1"> Paragraph 1 </p>
  <p id="hideCategory2"> Paragraph 2 </p>
  <p id="hideCategory3"> Paragraph 3 </p>
</body>
</html>

Надеюсь, это поможет. Приветствия

Комментарии:

1. Приносим извинения за сбивающий с толку пост. В конечном счете, я хочу отображать текст при нажатии. Я просто изменил процесс разработки, потому что подумал, что мне может быть проще определить, что происходит. Спасибо за решение, оно работает, чтобы скрыть текст, но когда я отменяю скрытие / показ в скрипте, это не выполняет свою работу, потому что после нажатия кнопки текст остается открытым при нажатии другой кнопки. Итак, я буду работать над добавлением чего-нибудь, чтобы скрыть любой текст, который был ранее показан. Спасибо.