JQuery показать / скрыть несколько «Другие» поля ввода в зависимости от выпадающего списка

Question

Я использую следующий jQuery, чтобы показать / скрыть поле заголовка «Другие» на странице:

$('label[for=customerTitleOther], #customerTitleOther').hide();

$('.jTitle').change(function() {
    if($(this).val() != 'Other') {
        $('label[for=customerTitleOther], .jOther').hide();
    } 
    else {
        $('label[for=customerTitleOther], .jOther').show();
    }       
});

Поле и соответствующая метка скрыты по умолчанию. Однако приложение, которое я создаю, имеет область действия для нескольких записей на одной странице, поэтому может быть несколько других полей, например. Любые идеи о том, как расширить jQuery, чтобы справиться с любым количеством полей «Другие» на странице?

Answer 1

Чтобы ответить на мой вопрос:

            $(".jTitle").change(function(){
            //set the select value
            var val = $(this).val();
            if(val != "Other") {
                $(this).nextAll('.jOther').hide();
            } else {
                $(this).nextAll('.jOther').show();
            }
        })

С HTML-кодом:

<td>
                        <select id="titleDepend1" class="inlineSpace jTitle">
                            <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="otherDepend1" class="inlineSpace jOther">Other</label>
                        <input type="text" class="text jOther" name="otherDepend1" id="otherDepend1" maxlength="6" />
                    </td>

Таким образом, все следующие элементы с классом jOther будут отображаться вChange.

Answer 2

Ну, это не тривиально, но я реализовал механизм "toggleOnSwitch". Фрагменты страницы помечены именем класса «toggleOnSwitch» и другим классом, который сообщает, какой <option>, флажок или переключатель определяют видимость. Обработчики событий, прикрепленные к элементам «toggler» (т. Е. <options> или полям ввода), добавляют или удаляют определенный класс из «переключаемых» элементов и (когда выключено) проверяют, что поля ввода помечены как «отключен» и еще несколько подобных задач по бухгалтерскому учету.

Одна хитрость заключается в том, что, когда элемент «toggler» является чем-то вроде <option> или переключателя, когда один элемент переключается «off», код должен проверить, чтобы увидеть, включен ли другой элемент «on». Это связано с тем, что событие не регистрируется, когда одна радиокнопка теряет настройку «флажок» из-за нажатия другой.

Я думал о том, чтобы опубликовать свой код для этого, но его пришлось бы немного очистить и лишить одного или двух специализированных хаков для моего собственного приложения. Кроме того, я хотел бы сделать так, чтобы он использовал плагин Джона Ресига «метаданные» вместо глупой версии, которую я сделал сам (прежде чем я знал, что «metadata.js» доступен).