Моя цель - создать скрипт, который будет отображать различные абзацы на странице, в зависимости от переключателя, который нажимается.
Первым этапом является создание сценария, который будет просто показывать один фрагмент текста при нажатии одной из кнопок.
Прочитав об этом, выяснилось, что вы должны быть в состоянии определить, какая кнопка была нажата, используя идентификатор элемента ввода и флажок. Обратите внимание, что я ожидаю полагаться на идентификаторы, чтобы знать, какой текст раскрыть.
Однако следующий код не работает и, будучи новичком, я изо всех сил пытаюсь понять, чего не хватает. Обратите внимание, что для того, что вначале кажется более простым подходом, я показываю текст на странице, а затем хочу, чтобы текст скрывался при нажатии кнопки.
Сценарий
<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 - но я не знаю.
Спасибо
UPDATE:
Основываясь на ответе Эдгара, я полностью изменил процесс и добавил еще одну строку, которая сбрасывает весь текст на скрытый при нажатии переключателя. Первоначальные тесты показывают, что это работает должным образом.
$(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;
}
});
});
Спасибо.