使用布尔值隐藏/显示元素

Question

I tend to have a lot of these in my code

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

Is there any more elegant way packaged with javascript, jquery, or underscore? Ideally I want something that looks like this

$element.showOrHideDependingOn(shouldElementBeVisible)

Answer 1

显然，您可以将布尔值传递给toggle函数

$element.toggle(shouldElementBeVisible)

Answer 2

Yes there is!

$element.toggle();

Without any parameters, toggle just toggles the elements visibility (I don't mean the visibility property) and depends on the current state of the element.

$element.toggle(display);

If you call toggle with a boolean parameter, element is shown if it is true and hidden if it is false

source

Answer 3

jQuery has toggle : http://api.jquery.com/toggle/

$element.toggle();

This will show the element if it's hidden, and hide it if it's shown.

Answer 4

The function .toggle() changes the display of the element.

If you want to change visibility , instead, I'd suggest using the ?: operator. For this, on your CSS, set the visibility to the original state, and in the JS simply put:

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

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

Answer 5

$element[ shouldElementBeVisible?'show':'hide' ]()