Энди Кларк опубликовал изящный новый метод под названием « Обрезка полей формы» , в котором используется красивый ненавязчивый DHTML, позволяющий пользователям переключать видимость необязательных полей формы для облегчения заполнения форм. Код Энди очень аккуратный, и вы должны пойти и прочитать его руководство, потому что я собираюсь его расширить.
Код Энди работает, циклически просматривая каждый div на странице, ища те, у которых есть класс fm-option и переключая их отображаемое значение. Это работает просто отлично, но на самом деле есть более эффективный способ достижения того же эффекта. Вместо того, чтобы переключать целую группу отдельных элементов, измените класс на элементе, который содержит все те, которые вы хотите переключить, и используйте простой селектор CSS для нацеливания на содержащиеся элементы.
Я продемонстрировал эту альтернативную технику на этой странице (адаптировано из примера Энди). Вот CSS:
form.remove div.fm-optional {
display: none;
}
И обработчик события ссылки:
toggle.onclick = function() {
if (/remove/i.exec(this.firstChild.nodeValue)) {
this.firstChild.nodeValue = 'Display optional fields?';
document.getElementById('example-form').className = 'remove';
} else {
this.firstChild.nodeValue = 'Remove optional fields?';
document.getElementById('example-form').className = 'display';
}
return false;
}
Вышеприведенный код, безусловно, может быть улучшен — например, он не касается возможности того, чтобы в форме был один или несколько существующих классов, которые необходимо поддерживать. Он служит полезной демонстрацией того, как массовые изменения могут быть внесены в документ путем переключения только одного класса на содержащий элемент.