隐藏/显示带有布尔值的元素

109

我的代码中往往有很多

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

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

$element.showOrHideDependingOn(shouldElementBeVisible)

javascript jquery underscore.js visibility

— 阿基尔·费尔南德斯（Aakil Fernandes）
source

jQuery显示或隐藏

— 乔治

@SpencerWieczorek碰巧提到了这个问题toggle，但这是一个不同的问题

— Aakil Fernandes

166

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

$element.toggle(shouldElementBeVisible)

— 阿基尔·费尔南德斯（Aakil Fernandes）
source

34

我建议您使用$element.toggle(!!shouldElementBeVisible)来防止意外击中其他“过载”之一，除非您当然非常确定该变量是布尔值。

— Jeroen

7

更好的选择可能是$element.toggle(shouldElementBeVisible == true)。

— jox

"0"并且"false"被对待与false，因此我认为区别并不重要- 0如果您希望隐藏它，那将是不正确的，因为所有这些设置了动画时间，但仍然翻转可见性。

— Tasgall

19

就在这里！

$element.toggle();

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

$element.toggle(display);

如果你调用toggle一个布尔参数，元件示，如果它是true和hidden它是否false

— 扎克·斯宾塞
source

2

我将要标记为错误，然后我意识到最后一个API参考允许您设置布尔值而不是options对象。

— Aakil Fernandes

下面几行：“没有参数，.toggle（）方法仅切换元素的可见性”

— Zach Spencer

2

那实际上与我想要的相反。我想让元素的当前状态无关紧要。状态应基于布尔变量。

— Aakil Fernandes

@AakilFernandes那么该变量isShown与$element是否可见无关？但是与元素无关的单独变量？

— Spencer Wieczorek

是的，很抱歉，我可能应该重命名isShown为shouldElementBeVisible使其更明显

— Aakil Fernandes

2

$element.toggle();

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

— 麦克风
source

0

该功能.toggle()改变了display元素的。

如果要更改visibility，我建议使用?:运算符。为此，在CSS上，将可见性设置为原始状态，然后在JS中简单地输入：

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

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

— 梅尔
source