установка начального состояния в jquery? - PullRequest
Новая
       4

установка начального состояния в jquery?

0 голосов
/ 31 августа 2011

У меня есть форма, в которой есть дополнительные вопросы, которые следует показывать только в том случае, если они отвечают определенным другим вопросом определенным образом. То, как я его сейчас настроил, прекрасно работает, если я начну с пустой формы. Однако, когда пользователь возвращается, чтобы отредактировать форму и ее загрузку, проверяются ли флажки предварительно из базы данных (через php), мой дизайн рушится.

Поэтому мне нужны некоторые советы или предложения о том, как лучше всего реструктурировать мой код jquery, чтобы он отображал и скрывал правильные элементы при загрузке формы.

Прямо сейчас у меня есть ряд функций .change () для флажков или кнопок выбора, которые заставляют другие (или несколько) элементов скрывать и / или отображать, например, следующее: 

$("#elt_prev_divorced").change(function () {
        if ($(this).is(":checked")) { 
                $("#questions_divorced").show("slow"); 
        } else { 
                $("#questions_divorced").hide("slow"); 
        }
});

$("input").change(function () {
    var selected_item = $(this).attr('id');

switch (selected_item) {
        case "elt_married":
            $("#elt_inrel_yes").attr('checked', true);
            $("#elt_reldes_married").attr('checked', true); 
            $("#li_spouse_or_partner").show("slow");
            $("#li_marriages").show("slow");
            break;
        case ...
}

И затем у меня есть класс CSS с именем «initial_hidden», который устанавливается для всех элементов, которые не должны отображаться при загрузке формы, если форма пуста. В моей функции готовности документа я скрываю все с этим тегом CSS. 

(function($) {
    $(".initially_hidden").hide(); 
})(jQuery);

Однако после того, как я скрыл эти элементы, мне теперь нужно сделать эквивалент всех этих функций .change () для обработки формы, загружаемой с существующими данными. Я знаю, что могу копировать и вставлять свои функции изменения в документ, готовый сделать это, но помимо того, что я, конечно, был ужасным стилем, я бы предпочел минимизировать дублирующийся код. Так, как я мог сделать это лучше / эффективнее? Я немного новичок в JQuery, поэтому я не уверен, какое направление выбрать здесь. Спасибо!

Ответы [ 2 ]

2 голосов
/ 31 августа 2011

В вашей функции готовности к документу вызовите $("#elt_prev_divorced").change(), чтобы выполнить обработчик, который вы уже зарегистрировали.

1 голос
/ 31 августа 2011

Во-первых, в вашем CSS .initially_hidden может быть установлено display:none в таблице стилей или в стиле страницы.jQuery установит display:block или что-то еще во встроенном стиле.Так что я не вижу смысла вызывать hide() для ваших элементов с классом initially_hidden.

. Что бы я сделал, это обработал бы это на стороне сервера и установил initially_hidden для всех элементов, которые должны не будет отображаться и позволить моему css скрыть эти элементы.

Таким образом, все элементы в форме, которые должны отображаться, и все, что не должно отображаться, скрыты.Если у вас есть флажок, который делает другие элементы видимыми, я бы посоветовал вам сделать 1 из 2 вещей.

  • Пройдите через dom относительно вашего флажка, чтобы определить, какой элемент должен отображаться,следовательно, нет необходимости жестко кодировать идентификатор. Эта скрипка содержит пример чего-то подобного.

  • Добавьте в свой флажок собственный атрибут, содержащий идентификатор элемента div /, который вы хотите отобразить:

HTML 

<input type="checkbox" eleToShow="marriedQuestion" class="questionCheckbox" />
<input type="checkbox" eleToShow="divorcedQuestion" class="questionCheckbox" />
<input type="checkbox" eleToShow="poligamyQuestion" class="questionCheckbox" />

jQuery 

$(".questionCheckbox").change(function () {
        if ($(this).is(":checked")) { 
                $("#"+$(this).attr("eleToShow")).show("slow"); 
        } else { 
                $("#"+$(this).attr("eleToShow")).hide("slow"); 
        }
});

Надеюсь, что это помогает и имеет смысл.

...