Js show: Правильные show/hide/toggle

Leave a Comment / Js / By /

Эквивалент .show() — jQuery в простом JavaScript

спросил

Изменено 10 лет, 5 месяцев назад

Просмотрено 8к раз

Кто-нибудь знает, что эквивалентно .show() для jquery в javascript?

Я пытался использовать document.getElementById и добавлять/удалять класс, который я назвал «показать»//»скрыть», но это не очень хорошо работает. У меня могут быть неправильные атрибуты в этих классах. Я не уверен..

выставочный класс:

 .show{
    должность: родственница;
    дисплей:блок;
}

и класс скрытия:

 .hide{
    положение: абсолютное;
    верх: 0px;
    справа: 0 пикселей;
    дисплей:нет;
}

Я почти уверен, что есть лучший способ.

  • javascript
  • jquery
  • css

2

 document. getElementById('myElement').style.display = 'блок'; // Показать
document.getElementById('myElement').style.display = 'нет'; // Спрятать

3

jQuery учитывает значение display до сокрытия. Когда вы запускаете show() , он возвращает его обратно к тому значению, которое было. Итак, это НЕ просто установка свойства display элемента на block и none .

, так что в основном:

 function hide(){
    //получить предыдущее отображаемое значение
    //сохраняем во внутреннем кеше. jQuery имеет внутреннее хранилище данных
    // скрыть элемент
}
показать функцию () {
    // получить предыдущее отображаемое значение для этого элемента
    //применяем к элементу, чтобы показать его
}

.показать()

Совпадающие элементы будут показаны сразу, без анимации. Это примерно эквивалентно вызову . css('display', 'block') , за исключением того, что свойство display восстанавливается до того состояния, в котором оно было изначально. Если элемент имеет отображаемое значение встроенный , затем скрыт и показан, он снова будет отображаться встроенным.

Попробуйте использовать document.getElementsByClassName, поскольку вы используете .show и .hide. Это классы, и вы пытаетесь настроить таргетинг по идентификатору. Отказ от ответственности: вы можете перепроверить поддержку старых браузеров для этого.

До jQuery я использовал следующий метод для отображения/скрытия элемента:

 HTMLElement.prototype.toggleDisplay = function(on_or_off, display_type) {
    if (typeof(tddisptype) == "undefined") tddisptype = "block";
    вар новый_дисплей;
    if (typeof(on_or_off)!= "логическое значение") {
        если (this.style.display == "none") new_display = display_type;
        иначе new_display = "нет";
    } еще {
        если (on_or_off) new_display = display_type;
        иначе new_display = "нет";
    }
    this.
 
 style.display = новый_дисплей;
}​

Добавляет функцию toggleDisplay() ко всем элементам; например, те, которые вы можете получить через document.getElementById(). Вы можете передать ему true или false в качестве параметра, чтобы показать или скрыть элемент, или, если вы не передадите ему параметр, он попытается выяснить, показывать или скрывать элемент. Второй аргумент указывает тип отображения, связанный с состоянием «включено»; выше, по умолчанию используется блок .

Использовать document.getElementById("MyId").className='show' document.getElementById("MyId").className='скрыть'

Зарегистрируйтесь или войдите в систему

Зарегистрируйтесь с помощью Google

Зарегистрироваться через Facebook

Зарегистрируйтесь, используя электронную почту и пароль

Опубликовать как гость

Электронная почта

Требуется, но не отображается

Опубликовать как гость

Электронная почта

Требуется, но не отображается

Format · Day.

js

Получить отформатированную дату в соответствии с переданной строкой токенов.

Чтобы экранировать символы, заключите их в квадратные скобки (например, [ММ] ).

 dayjs().format()
// текущая дата в формате ISO8601, без доли секунды, например. '2020-04-02T08:02:17-05:00'
dayjs('2019-01-25').format('[YYYYescape] YYYY-MM-DDTHH:mm:ssZ[Z]')
// 'YYYYescape 2019-01-25T00:00:00-02:00Z'
dayjs('2019-01-25').format('ДД/ММ/ГГГГ') // '25/01/2019'
Список всех доступных форматов
0 80136 9033.
91362

9133939399.

01010139.. HHMM

9999. зависимый Расширенный формат плагин )
Формат Выход Описание
ГГ Two-digit year
YYYY 2018 Four-digit year
M 1-12 The month, beginning at 1
MM 01-12 The month, 2-digits
MMM Jan-Dec The abbreviated month name
MMMM 		January-December The full month name
D 1-31 The day of the month
DD 01-31 The day of the month, 2-digits
D 0-6 День недели, с воскресеньем 0
DD SU-SA. MIN AMATE OF THE DAY OF THE DAY OT THEAL THE DAY SU-SA Sun-Sat The short name of the day of the week
dddd Sunday-Saturday The name of the day of the week
H 0-23 The hour
HH 00-23 The hour, 2-digits
h 1-12 The hour, 12-hour clock
hh 01-12 Час, 12-часовые часы, 2 цифры
M 0-59 Минут
. , 2-digits
s 0-59 The second
ss 00-59 The second, 2-digits
SSS 000 -999 Millisecond, 3-й цифры
Z +05: 00 Офте с UTC, ± HH: мм
93939904.

0101010139.

010139.

010139.

0139.

0139.

010139.

A AM PM
A PM
PM
PM
PM
  • Другие доступные форматы Q Do k kk X x ... в плагине AdvancedFormat

Локализованные форматы

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

Это требует Локализованный формат
плагин для работы
 dayjs.extend(LocalizedFormat)
dayjs().format('L LT')
List of localized formats
Format English Locale Sample Output
LT h:mm A 8:02 PM
LTS h:mm:ss A 8:02:18 PM
L MM/DD/YYYY 08/16/2018
LL MMMM D, YYYY 16 августа 2018 г.
LLL MMMM D, YYYY h:mm A August 16, 2018 8:02 PM
LLLL dddd, MMMM D, YYYY h:mm A Thursday, 16 августа 2018 г. 8:02 вечера
L M/D/YYYY 8/16/2018
LL 0136
LL 0136
LL 0136.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *