用布尔值隐藏/显示元素答案

【问题标题】：Hide/show element with a boolean用布尔值隐藏/显示元素
【发布时间】：2015-03-13 01:29:38
【问题描述】：

我的代码中往往有很多这些

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

有没有更优雅的方式用 javascript、jquery 或下划线打包？理想情况下，我想要看起来像这样的东西

$element.showOrHideDependingOn(shouldElementBeVisible)

【问题讨论】：

【解决方案1】：

是的！

$element.toggle();

没有任何参数，toggle 只是切换元素的可见性（我不是指visibility 属性）并取决于元素的当前状态。

$element.toggle(display);

如果您使用布尔参数调用toggle，则如果元素是true，则显示元素，如果是hidden，则显示元素false

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

$element.toggle(shouldElementBeVisible)

【讨论】：

我建议使用$element.toggle(!!shouldElementBeVisible) 来防止accidentally hitting one of the other "overloads"，当然除非您非常确定该变量是布尔值。
更好的选择可能是$element.toggle(shouldElementBeVisible == true)。
"0" 和 "false" 的处理方式与 false 非常不同，所以我认为区别并不重要 - 如果您希望隐藏它，即使 0 也是不正确的，因为所有这些都设置了动画时间，但仍然翻转可见性。

【解决方案4】：

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

$element.toggle();

如果元素被隐藏，这将显示该元素，如果显示，则将其隐藏。

【讨论】：