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

109

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

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

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

$element.showOrHideDependingOn(shouldElementBeVisible)
javascript jquery underscore.js visibility Аакил Фернандес
источник
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");
Мел
источник