jQuery показать / скрыть различные наборы элементов формы на одной гиперссылке

Question

У меня есть форма, в которую можно добавить до 6 детей. Поэтому будет 6 наборов следующего HTML:

            <table class="portletTable child" cellpadding="0" cellspacing="0" border="0" summary="Please enter some more details regarding your dependants">
            <tr>
                <th>
                    <label for="indTitle">Title</label>
                </th>
                <td colspan="3">
                    <select id="indTitle" class="inlineSpace">
                        <option value="Please select">Please select...</option>
                        <option value="Mr">Mr</option>
                        <option value="Mrs">Mrs</option>
                        <option value="Ms">Ms</option>
                        <option value="Miss">Miss</option>
                        <option value="Dr">Dr</option>
                        <option value="Other">Other</option>
                    </select>
                    <label for="indOther" class="inlineSpace">Other</label>
                    <input type="text" class="text" name="indOther" id="indOther" maxlength="20" />
                </td>
            </tr>
            <tr>
                <th>
                    <label for="firstname">First name</label>
                </th>
                <td colspan="3">
                    <input type="text" class="text" maxlength="50" value="" id="firstname" />
                </td>
            </tr>
            <tr>
                <th>
                    <label for="lastname">Last name</label>
                </th>
                <td colspan="3">
                    <input type="text" class="text" maxlength="50" value="" id="lastname" />
                </td>
            </tr>       
            <tr>
                <th>
                    <label for="dobDay">Date of birth</label>
                </th>
                <td colspan="3">
                    <select name="dobDay" id="dobDay" class="inlineSpace">
                        <option value="day">Day</option>
                    </select>
                    <label for="dobMonth" class="offScreen">Month</label>
                    <select name="dobMonth" id="dobMonth" class="inlineSpace">
                        <option value="month">Month</option>
                    </select>
                    <label for="dobYear" class="offScreen">Month</label>                
                    <select name="dobYear" id="dobYear">
                        <option value="year">Year</option>
                    </select>
                    <p class="fieldNote">You must be over 'minimum partner age' and under 'max partner age'</p>             
                </td>
            </tr>
            <tr>
                <th>
                    Gender
                </th>
                <td colspan="3">
                    <input id="male" name="childGender" class="radio" type="radio" />
                    <label for="male" class="inlineSpace">Male</label>
                    <input id="female" name="childGender" class="radio" type="radio" />
                    <label for="female">Female</label>
                </td>
            </tr>               
        </table>

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

Когда пользователь нажимает следующую ссылку, я хочу, чтобы второй дочерний элемент показывался, если он щелкает по нему снова, то третий дочерний элемент показывает и т. Д.

<tr>
                <th class="dependant">
                    <a href="" class="add">Add another child to your policy</a>
                </th>
            </tr>

Очевидно, что при показе шестого ребенка ссылка не должна отображаться.

Мне также нужно обратное, чтобы быть правдой в том, что у пользователя есть возможность удалить последнего добавленного потомка с этой гиперссылкой:

<tr>
                <th class="dependant">
                    <a href="" class="remove">Remove this child from your policy</a>
                </th>
            </tr>

Если Javascript выключен, то все будет отображаться по умолчанию.

Заранее спасибо, если кто-нибудь из вас может помочь.

Answer 1

Это должно сделать это:

$(function() {
    // Hide everything except the first one
    $('.portletTable').not(':first').hide();

    // Remove functionality
    $('.dependant .remove').click(function() {
        // Hide this child and move it to the end of the table
        $(this)
            .closest('.portletTable')
            .hide()
            .appendTo($(this).closest('form'));
    });

    // Show functionality
    $('.dependant .remove').click(function() {
        // Show the first hidden table
        $(this).closest('form').find('.portletTable:hidden:first').show();
    });
});

Это должно дать вам ту функциональность, которую вы хотите. Возможно, вы захотите улучшить функциональность удаления, сбросив все входы и выбрав их состояние по умолчанию.

Answer 2

$('.add').live('click',
   function() {
       //seek next element with class "child"
       var $nextChild = $(this).parents('.child').next('.child :first');  
       if ($nextChild.size() > 0)  //exists?
           $nextChild.show();  //show it
   }
);

$('.remove').live('click',
   function() {
       //hide the parent with class "child"
       $(this).parents('.child').hide();
   }
);

Замените live на bind, если вы не планируете добавлять ссылки позже.

Answer 3

Вы можете поместить все таблицы с разделенными идентификаторами и управлять их состоянием видимости с помощью document.getElementById ("table_id"). Style.display = "none" или document.getElementById ("table_id"). Style.display = "block ».