Использование jquery для скрытия динамически добавленных div - PullRequest
Новая
       7

Использование jquery для скрытия динамически добавленных div

3 голосов
/ 28 июля 2010

Приведенный ниже код jquery будет скрывать элементы div, оканчивающиеся на -value-wrapper, при загрузке страницы.Моя проблема в том, что кнопка «Добавить дополнительные значения» добавит еще одну строку (с увеличенным числом).Когда это произойдет, все div раскрыты.Есть ли способ скрыть оригинальные и скрыть их в новом наборе?

HTML-разметка выглядит следующим образом: 

<div id="group-information-items">
    <fieldset>
        <legend>Member Information</legend>
        <label>Form label 1</label>
        <table>
            <tr>
                <td>
                <div class="form-radios">
                    <input type="radio" class="form-radio" checked="checked" value="0" name="gci[0][fa][value]" id="edit-gci-value-0"> A
                    <input type="radio" class="form-radio" value="1" name="gci[0][fa][value]" id="edit-gci-value-0">B 
                </div>

                <!-- This is the div that is hidden -->
                <div id="edit-gci-0-fa-list-value-wrapper" class="form-item">
                    <label>List: </label>
                    <textarea name="gci[0][fa_list][value]" rows="5" cols="60"></textarea>
                </div>

                </td>
            </tr>
        </table>

        <!-- WHEN THIS BUTTON IS CLICKED, A CLONE OF THE ROW ABOVE IS APPENDED TO THE TABLE -->
        <!-- THE ONLY DIFFERENCE IS [0] BECOMES [1] AND SO ON -->
        <div class="content-add-more clear-block">
            <input type="submit" value="Add more values" id="edit-gci-add-more" name="gci_add_more">
        </div>
    </fieldset>
</div>

Код, который выполняет первоначальное скрытиениже: 

$("#group-information-items div").each(function() {
        $("div[id$='-value-wrapper']").each(function() {
                        $(this).hide();
        });
});

Ответы [ 2 ]

1 голос
/ 28 июля 2010

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

$("#group-information-items").find("div[id$='-value-wrapper']").hide();

Впрочем, вопрос напрашивается. Почему бы не установить обычный статический стиль, чтобы условие по умолчанию для любого из этих div было скрыто? На практике имеет смысл выровнять стили по умолчанию с логическим состоянием по умолчанию элементов вашей страницы. Итак: 

div#group-information-items div.form-item { display: none; }

Теперь все "новые" дивы будут скрыты. При необходимости измените свой код на show() divs (вы не показали достаточно, чтобы знать, как, где и когда вы это сделаете). Если вы хотите прикрепить поведение к элементам, созданным после начальной загрузки страницы, вам следует взглянуть на live() или delegate().

0 голосов
/ 28 июля 2010

попробуйте скрыть div по нажатию кнопки ввода: 

  $("#edit-gci-add-more").click(function() {
             $("div[id$='-value-wrapper']").hide();
  });
...