Скрыть / показать элемент с логическим значением

109

В моем коде их много

if(shouldElementBeVisible)
    $element.show()
else
    $element.hide()

Есть ли более элегантный способ упаковки с помощью javascript, jquery или подчеркивания? В идеале я хочу что-то вроде этого

$element.showOrHideDependingOn(shouldElementBeVisible)

— Аакил Фернандес
источник

jQuery show or hide

— Джордж

@SpencerWieczorek, этот вопрос касается ссылки toggle, но это другой вопрос

— Аакил Фернандес,

166

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

$element.toggle(shouldElementBeVisible)

— Аакил Фернандес
источник

34

Я рекомендую использовать, $element.toggle(!!shouldElementBeVisible)чтобы предотвратить случайное попадание в одну из других «перегрузок» , если, конечно, вы не уверены, что переменная является логическим значением.

— Jeroen

8

Может быть, лучший вариант $element.toggle(shouldElementBeVisible == true).

— jox

"0"и "false"обрабатываются совсем иначе, чем в falseлюбом случае, поэтому я не думаю, что это различие действительно имеет значение - даже 0было бы неверным, если бы вы хотели, чтобы оно было скрыто, поскольку все эти значения времени анимации установлены, но все же отражают видимость.

— Tasgall

19

Да, есть!

$element.toggle();

Без параметров toggleпросто переключает видимость элементов (я не имею в виду visibilityсвойство) и зависит от текущего состояния элемента.

$element.toggle(display);

Если вы вызываете toggleс логическим параметром, элемент отображается, если он есть, trueи hiddenесли онfalse

источник

— Зак Спенсер
источник

2

Я собирался отметить это неправильно, но потом понял, что последняя ссылка на API позволяет вам установить логическое значение вместо объекта параметров.

— Аакил Фернандес,

несколько строк под этим: «Без параметров метод .toggle () просто переключает видимость элементов»

— Зак Спенсер,

2

это на самом деле противоположное тому, что я хотел. Я хотел, чтобы текущее состояние элемента не имело значения. Состояние должно быть основано на логической переменной.

— Аакил Фернандес

@AakilFernandes Значит, переменная isShownне имеет отношения к тому, чтобы $elementбыть видимым, или нет? Но отдельная переменная, не относящаяся к элементу?

— Spencer Wieczorek

Да, извините, мне, наверное, следовало бы переименовать isShownво что-то вроде, shouldElementBeVisibleчтобы сделать это более очевидным

— Аакил Фернандес

2

jQuery имеет toggle: http://api.jquery.com/toggle/

$element.toggle();

Это покажет элемент, если он скрыт, и скроет его, если он отображается.

— Майк
источник

0

Функция .toggle()изменяет displayзначение элемента.

Если вы хотите изменить visibility, я бы предложил использовать ?:оператор. Для этого в вашем CSS установите видимость в исходное состояние, а в JS просто поместите:

    var checkboxChecked = $("#yourCheckbox").(":checked");

    $("#yourElement").css("visibility", checkboxChecked ? "visible" : "hidden");

— Мел
источник