Использование JQuery и 3 радио-кнопок для выявления / расширения различных HTML

Question

Мне нужна помощь для расширения сценария jquery на этой странице , чтобы создать набор из трех переключателей, каждый из которых отображает / раскрывает различные HTML-коды при выборе.

Учебное пособие и прилагаемый сценарий ввышеупомянутая связанная страница написана для набора из двух переключателей.Вот html-пример учебника по набору двух переключателей «Да» и «Нет», который при выборе «Нет» показывает html id='parent2':

//Example 2: Display Fields Based On Selected Radio Button With jQuery Cookie
<fieldset></p>
<ol class="formset">
        <li><label for="fname2">First Name: </label>
    <input type="text" id="fname2" value="" name="fname2"/></li>
        <li><label for="lname2">Last Name: </label><br />
    <input type="text" id="lname2" value="" name="lname2"/></li>
        <li><label for="email2">Email Address: </label><br />
    <input type="text" id="email2" value="" name="email2" /></li>
        <li><label for="age2">Are you above 21 yrs old?</label><br />
    <input type="radio" name="age2" value="Yes" class="aboveage2" /> Yes
    <input type="radio" name="age2" value="No" class="aboveage2" /> No</li>
</ol>
<ol id="parent2" class="formset">
        <li><strong>Parent/Guardian Information:</strong></li>
        <li><label for="pname2">Parent Name: </label>
    <input type="text" id="pname2" value="" name="pname2"/></li>
        <li><label for="contact2">Contact No.: </label><br />
    <input type="text" id="contact2" value="" name="contact2"/></li>
</ol>
<input type="submit" name="submit" value="Submit" class="submitbtn" />
</fieldset>

А вот jquery, который скрывает ипоказывает / раскрывает HTML в 'parent2' и записывает развернутое или свернутое состояние parent2 в файл cookie (для случая, когда форма перезагружается).

$(document).ready(function(){
    $("#parent2").css("display","none");
        $(".aboveage2").click(function(){
        if ($('input[name=age2]:checked').val() == "No" ) {
            $("#parent2").slideDown("fast"); //Slide Down Effect
            $.cookie('showTop', 'expanded'); //Add cookie 'ShowTop'
        } else {
            $("#parent2").slideUp("fast");  //Slide Up Effect
            $.cookie('showTop', 'collapsed'); //Add cookie 'ShowTop'
        }
     });
        var showTop = $.cookie('showTop');
        if (showTop == 'expanded') {
        $("#parent2").show("fast");
        $('input[name=age2]:checked');
      } else {
        $("#parent2").hide("fast");
        $('input[name=age2]:checked');
      }
});

Моя проблема заключается в попытке использовать набортри переключателя, например, с параметрами «Да», «Может быть» и «Нет», каждый из которых отображает различные HTML при нажатии (и скрывает HTML-код ранее выбранного параметра, если он был).

Мое решениедолжен был попытаться использовать оператор if, else if, else, который обернул существующие операторы if, else, аналогичные коду из учебного руководства выше.Но это неправильный способ решения этой проблемы, или я неправильно использую синтаксис оператора.

Может кто-нибудь предложить правильный путь?

Answer 1

Делает ли это то, что вы хотите: http://jsfiddle.net/8p7J2/2/

Answer 2

Есть так много способов сделать это ... и трудно сказать, что какой-то один "правильный" ... но я могу дать вам одну небольшую, краткую возможность:

Во-первых, проверьтеработающий пример, который я собрал на jsfiddle.net: http://jsfiddle.net/hPPqc/

Разметка:

<div><input type='radio' name='opt' value='1' /> Option 1</div>
<div><input type='radio' name='opt' value='2' /> Option 2</div>
<div><input type='radio' name='opt' value='3' /> Option 3</div>
<div class='info' id='info1'>Option 1 Info</div>
<div class='info' id='info2'>Option 2 Info</div>
<div class='info' id='info3'>Option 3 Info</div>

Javascript:

var update = function() {
    $(".info").hide();
    $("#info" + $(this).val()).show();
};

$("input[type='radio']").change(update);

Css:

.info { display: none; }

Объяснение:

Здесь у нас есть пара радиостанций, каждая из которых имеет свой связанный с "div" info.

Чтобы связать каждое радио с каждым информационным блоком, я решил сделать значение радио частью имени соответствующего информационного блока (радио со значением = '1' связано с информационным блоком с именем "info1")

Это, очевидно, может быть сделано любым количеством способов ... включая пользовательский атрибут в div, вручную и т. Д. И т. Д.

Я скрываю все информационные поля по умолчанию по умолчаниюдавая им всем класс («info»), который указывает «display: none» в css.

Наконец, я подключаю стандарт по изменениям ко всем моим радио с помощью javascript.Этот метод скрывает все поля «информация» и, в частности, показывает тот, который я хочу, основываясь на значении выбранного радио.

Если вам нужно что-нибудь еще, пожалуйста, дайте мне знать.

Спасибо