Как сделать переключатель на js
Добавил пользователь Дмитрий К. Обновлено: 04.10.2024
Не так давно мой друг создал компонент пользовательского интерфейса для изменения содержимого страницы на основе текущего выбора элемента . Ее код работал, но, будучи новичком в JavaScript, она создала компонент в jQuery и попросила меня помочь оптимизировать его.
Не точно копируя код, я создал следующий пример, чтобы продемонстрировать тип компонента пользовательского интерфейса, который она пыталась создать:
Немного оптимизировав его, вот jQuery, который мы использовали для переключения состояния отображения выбранного блока контента.
Так что здесь происходит?
Вышеприведенная функция jQuery ищет все блоки содержимого, имеющие класс jqueryOptions, и скрывает их по умолчанию.
Это было не слишком сложно, а?
Так почему бы не оставить это на этом?
Проблема с решением jQuery состоит в том, что мы включили jQuery (сжатый 98 КБ) только для этого небольшого количества функциональности. Мы могли бы сделать лучше.
Не изменяя разметку, давайте посмотрим, как мы можем создать такой же эффект, сначала используя ванильный JavaScript, а затем используя только CSS.
Сначала давайте подумаем о том, что должно произойти, чтобы воссоздать этот эффект.
- Контент должен быть скрыт по умолчанию.
- Сделав выбор, нам нужно показать выбранный контент.
- Нам также нужно скрыть любой ранее открытый контент при выборе новой опции.
К этому есть некоторые дополнительные части, которые будут объяснены в коде, но это три основных момента этого скрипта, которые мы должны помнить. Один из которых, скрывая контент по умолчанию, мы можем установить по умолчанию с помощью CSS, так что это один вычеркнутый. Два, чтобы пойти.
Создание версии JavaScript Vanilla
Для начала давайте настроим несколько переменных, чтобы сделать нашу жизнь проще.
Теперь у нас есть переменные для легкого доступа к нашему вводу select ( selectInput ), различным панелям содержимого ( panels ), местозаполнителю для текущего выделения и итератору.
Далее нам нужно написать некоторые функции, которые помогут нам позаботиться о пунктах из вышеупомянутого маркированного списка.
Начиная с последней маркировки сначала, мы должны убедиться, что любой контент, который был просмотрен, будет скрыт при выборе новой опции. Для этого мы создадим свою собственную функцию:
Функция vUpdate() выполняется всякий раз, когда выбранный вход обновляется (обнаруживается через событие change ). Поэтому, когда vUpdate() запускается, он делает следующее:
- Захватывает текущее значение selectInput и сохраняет его в переменной currentSelect .
- Выполняет функцию clearShow чтобы удалить любые следы .show с панелей.
- Выполняет addShow() , передавая currentSelect для завершения недостающего фрагмента этой функции
- Назначает .show панели с классом, который соответствует текущему значению выбранного входа.
Вы можете проверить демо ниже, чтобы увидеть все это в действии:
Но прежде чем мы продолжим … Если вы выбрали опцию из выбранного входа и затем обновили страницу, значение ввода может остаться, но соответствующая панель не отображается.
И, наконец, в случае, если вам требуется поддержка Internet Explorer 9 или ниже, мы не можем использовать classList() . Чтобы обойти это, вот функции для добавления и удаления классов из элемента. Вышеприведенные демонстрации CodePen используют эти функции:
Это можно сделать только с помощью CSS?
Имея множество компонентов, которые я делаю, я хотел бы попытаться понять, насколько близко я могу их воспроизвести в чистом CSS-решении. Однако, если решения jQuery и vanilla JavaScript могут основываться на одной и той же разметке, необходимо изменить только решение CSS.
Самым большим и самым важным изменением по сравнению с предыдущими версиями является то, что select должен быть полностью заменен. Если в предыдущих примерах использовалось значение элемента select для изменения отображаемой панели содержимого, один только CSS не знает об этих изменениях значений и, следовательно, не может использовать разные значения для переключения различных цепочек селектора.
Метки для opt1, opt2 и opt3 изменяют проверенное состояние переключателей с соответствующими идентификаторами. В CSS, в зависимости от того, какая радиокнопка выбрана, соответствующая панель настраивается для отображения с использованием общего селектора родного брата.
В этих статьях я не расскажу о некоторых более сложных аспектах воссоздания элемента select .
Довольно просто, что мы хотим, чтобы содержимое страницы немедленно обновлялось в зависимости от того, какая опция нажата. Проблема, с которой мы сталкиваемся, состоит в том, что, если элемент select и блоки контента основаны на одних и тех же переключателях, щелчок по элементу select приведет к исчезновению контента. Не только это, но если бы были открыты опции select , и мы щелкнули по одной из них, опции исчезли бы, и блок контента отобразился бы.
Чтобы устранить этот недостаток UX, я добавил . Теперь элемент select и текущий контент могут быть открыты одновременно. Недостатком здесь является то, что элемент select не закрывается при щелчке опции, а закрывается только при повторном нажатии. Не идеально. Однако я чувствовал, что это был лучший опыт, чем тот, о котором я упоминал ранее. Чтобы привлечь внимание к элементу select нужно щелкнуть снова, чтобы закрыть, я изменил стрелку вниз на X при открытии элемента:
Еще одна особенность истинных элементов select я хотел воссоздать, заключалась в том, что при выборе новой опции текст основного элемента select изменяется на эту опцию. Используя псевдоэлемент :before , этот текст может меняться в зависимости от того, какая радиокнопка выбрана:
Вы можете увидеть выше и многое другое в действии, просмотрев исходный код демонстрационной версии CodePen только для CSS:
В заключение кратко изложу плюсы и минусы…
Мы только что рассмотрели три различных способа создания аналогичного интерфейса с использованием jQuery, затем с использованием ванильного JavaScript, а затем снова с использованием только CSS. У каждой техники есть свои плюсы и минусы.
Решение jQuery , безусловно, является самым простым в реализации, имея очень мало кода.
Недостатком решения jQuery является то, что если вам нужна только библиотека для этого интерфейса, вы добавляете целую библиотеку для одной цели.
Решение Vanilla JavaScript , использующее CSS-преобразования и переходы, очень близко к решению jQuery. Сокращенный до 486 байт — очевидно, намного меньше, чем альтернатива jQuery.
Недостатком этого решения является то, что некоторые из используемых JavaScript поддерживаются не во всех браузерах, и для поддержки этих браузеров вам потребуется написать дополнительные обходные функции (как я это сделал).
Решение только для CSS отлично подходит для тех, кто хочет экспериментировать с CSS или для тех, кто недостаточно знаком с JavaScript. Однако для правильной работы требуется довольно много повторяющихся CSS-кодов, зависящих от разметки, и это может отрицательно повлиять на доступность сайта, поскольку вы должны использовать элементы так, как они не предназначены для использования.
Сейчас мы поговорим о различных приемах работы сценариев JavaScript с HTML-формами.
Если в HTML-документе определена форма, то она доступна сценарию JavaScript как объект, входящий в объект document с именем, заданным атрибутом NAME тега FORM .
Свойства форм
Форма имеет два набора свойств, состав одного из которых фиксированный, а состав другого зависит от того, какие элементы определены в форме.
Свойства первого набора
- action. Значение атрибута ACTION тега FORM .
- encoding. Значение атрибута ENCTYPE тега FORM .
- method. Значение атрибута METHOD тега FORM .
- target. Значение атрибута TARGET тега FORM .
- elements. Массив всех элементов формы.
- length. Размер массива elements.
Большинство свойств первого набора просто отражает значение соответствующих атрибутов тега FORM . Что же касается массива elements , то в нем находятся объекты, соответствующие элементам, определенным в форме. Эти объекты образуют второй набор свойств формы. Адресоваться к этим объектам можно как к элементам массива elements , причем первому элементу формы будет соответствовать элемент с индексом 0, второму - с индексом 1 и т.д. Однако удобнее обращаться к элементам формы по их именам, заданным атрибутом NAME .
Элементы форм
Кнопки (BUTTON, RESET, SUBMIT)
Свойства
- name. Имя объекта.
- value. Надпись на кнопке.
Метод
- click( ). Вызов этого метода тождественен щелчку мышкой по кнопке.
Пример
Нажатие кнопки
Флажок (CHECKBOX)
Свойства
- name. Имя объекта.
- value. Надпись на кнопке.
- checked. Состояние флажка: true - флажок установлен, false - флажок не установлен.
- defaultChecked. Отражает наличие атрибута CHECKED : true - есть, false - нет.
Метод
- click( ). Вызов этого метода меняет состояние флажка.
Пример
Метод click флажка
Переключатель (RADIO)
Свойства
- name. Имя объекта.
- value. Надпись на кнопке.
- length. Количество переключателей в группе.
- checked. Состояние переключателя: true - переключатель включен, false - выключен.
- defaultChecked. Отражает наличие атрибута CHECKED : true - есть, false - нет.
Метод
- click( ). Вызов этого метода включает переключатель.
Так как группа переключателей имеет одно имя NAME , то к переключателям надо адресоваться как к элементам массива.
Пример
Метод click группы переключателей
Список (SELECT)
Свойства
- name. Имя объекта.
- selectedIndex. Номер выбранного элемента или первого среди выбранных (если указан атрибут MULTIPLE ).
- length. Количество элементов (строк) в списке.
- options. Массив элементов списка, заданных тегами OPTION .
- value. Значение атрибута VALUE .
- text. Текст, указанный после тега OPTION .
- index. Индекс элемента списка.
- selected. Присвоив этому свойству значение true , можно выбрать данный элемент.
- defaultSelected. Отражает наличие атрибута SELECTED : true - есть, false - нет.
Методы
- focus( ). Передает списку фокус ввода.
- blur( ). Отбирает у списка фокус ввода.
Пример
Работа с готовым списком
Кроме работы с готовыми списками JavaScript может заполнять список динамически. Для записи нового элемента списка используется конструктор Option c четырьмя параметрами, первый из которых задает текст, отображаемый в списке, второй - значение элемента списка, соответствующее значению атрибута VALUE , третий соответствует свойству defaultSelected , четвертый - свойству selected .
Пример
Динамическое заполнение списка
Поле ввода (TEXT)
Свойства
- name. Имя объекта.
- defaultValue. Начальное содержимое поля.
- value. Текущее содержимое поля.
Методы
- focus( ). Передает полю фокус ввода.
- blur( ). Отбирает у поля фокус ввода.
- select( ). Выделяет содержимое поля.
Пример
Заполните анкету
Обратите внимание на то, что символы фамилии и имени при потере фокуса соответствующими полями преобразуются в прописные. Для этого используется метод toUpperCase , определенный во встроенном классе строк.
Текстовая область (TEXTAREA)
Свойства
- name. Имя объекта.
- defaultValue. Начальное содержимое области.
- value. Текущее содержимое области.
Методы
- focus( ). Передает области фокус ввода.
- blur( ). Отбирает у области фокус ввода.
- select( ). Выделяет содержимое области.
Пример
Отправьте телеграмму
Для установки курсора в определенное место textarea-области используйте следующую кросбраузерную функцию:
Давайте теперь поработаем с радиокнопками. Они представляют собой группу переключателей, из которых может быть выбран только один. Чтобы несколько радиокнопочек были группой, они должны иметь одинаковое значение атрибута name :
А чтобы отличить на JavaScript, какая именно кнопка была выбрана, каждой радиокнопке в группе добавляют атрибуты value с различным значением:
Чтобы сделать какую-нибудь радиокнопку отмеченной по умолчанию, ей необходимо задать атрибут checked :
Давайте посмотрим на практике, как работать с такими кнопками на JavaScript. Пусть у нас есть представленная выше группа радиокнопок, а также обычная кнопка:
Давайте сделаем так, чтобы по нажатию на кнопку на экран вывелось value той радиокнопочки, которая отмечена в данный момент.
Для решения задачи необходимо перебрать все наши радиокнопочки циклом и определить, какая из них выбрана. Для этого нужно прочитывать значение свойства checked каждой из перебираемых радиокнопок. У которой это свойство равно true - та радиокнопочка и выбрана.
Даны 3 радиокнопки, абзац и кнопка. По клику на кнопку выведите в абзац value отмеченной радиокнопки.
У меня есть код, работающий в jQuery, но я не уверен, как мне воспроизвести его, используя чистый JavaScript?
Я хочу иметь возможность нажать кнопку и установить все флажки в этом div. Затем щелкните еще раз, чтобы отменить выбор.
Каждый раздел будет находиться в аккордеоне, поэтому может потребоваться использовать (это), чтобы он не выбирал все в каждом аккордеоне.
Пожалуйста, редактировать ваш вопрос, чтобы включить HTML из вашего jsFiddle. Я изменил ваш блок кода на фрагмент. Это должно позволить вам иметь исполняемый пример в вашем вопросе.
Ответы 2
Вы можете выбрать кнопку по идентификатору, если вы дадите ей идентификатор. См. первую строку кода ниже.
Затем вы можете установить все флажки по имени класса, см. строку 2.
Затем вы можете сохранить логическое значение, чтобы определить, будут ли отмечены флажки или нет, и текст, отображаемый для кнопки.
Вы можете прикрепить прослушиватель событий щелчка для кнопки, и внутри него вы перевернете логическое значение isChecked. Вы перебираете каждый флажок и, если isChecked имеет значение true, устанавливаете для него атрибут флажка, иначе вы удаляете этот атрибут. Кроме того, если isChecked имеет значение true, вы устанавливаете для текста кнопки значение Uncheck All, иначе — Check All, устанавливая значение элемента ввода.
Хорошо, если вы хотите сделать прямое преобразование, вам нужно что-то вроде этого.
Я изменил каждый JQuery только на его чистый аналог.
Несмотря на то, что вы получили общую функциональность, люди используют подобные вопросы для того, чтобы увидеть прямые эквиваленты между jQuery и ванильным JavaScript. Если вы хотите включить дополнительную версию кода, обеспечивающую альтернативную реализацию, в дополнение к прямое преобразование — это хорошо, но, пожалуйста, не называйте прямое преобразование, если это не так.
Читайте также: