Javascript jQuery.toggle（showOrHide）不工作

我想使用.toggle（showOrHide）功能检查状态。在api文档中，它被称为：

---

但它不起作用。有人知道怎么做吗？我想检查它的状态是显示还是隐藏。

您在jQuery文档的哪里找到了这个？快速查找表明这是一种显示或隐藏元素的方法，而不是返回元素是否可见：

给定元素

您提供的代码将起作用

为它创建一个函数：

function showOrHide(element, display) {   
    if ( display === true ) {
        $(element ).show();
    } else if ( display === false ) {
        $(element).hide();
    }
}

用foo来称呼它

showOrHide($('#foo'), true);
showOrHide($('#foo'), false);

这是演示链接：

我更新了答案，请检查它是否是你想要的正确答案

下面是示例代码：

var showOrHide = false;
$( "button" ).click(function() {
    showOrHide = !showOrHide;
    if ( showOrHide === true ) {
        $( "#foo" ).show();
    } else if ( showOrHide === false ) {
        $( "#foo" ).hide();
    }
});

---

您没有理解api（选中-向上滚动几行以查看它）。 在api中，它表示这个

$（“#foo”）.toggle（showOrHide）相当于：

if ( showOrHide === true ) {
  $( "#foo" ).show();
} else if ( showOrHide === false ) {
  $( "#foo" ).hide();
}

至于使用它：您需要将变量“showOrHide”的值设置为“true”或“false”，然后使用
$（“#foo”）.toggle（showOrHide），当然，您需要将“#foo”更改为您的元素

至于检查元素是否可见或隐藏，请检查链接。
根据文档：

该方法的第二个版本接受布尔参数。如果该参数为真，则显示匹配的元素；如果为false，则隐藏元素。实质上，该声明：

您需要声明
true
或
false

var showOrHide = true;

if ( showOrHide === true ) {
    $( "#foo" ).show();
} else if ( showOrHide === false ) {
    $( "#foo" ).hide();
}

在大多数情况下，使用速记是有意义的，但OP似乎要求首先检查状态。
使用变量检查元素的状态如何：

var isShowing = true;

$('button').click(function () {
    if (isShowing) {
        $('#foo').hide();
        isShowing = false;
    }
    else {
        $('#foo').show();
        isShowing = true;
    }
});

根据@urbz之前发布的内容…
这是一个答案，我推断您的问题是：

我如何评估某物是否被显示或隐藏

这个问题可以从以下方面推断：

。。。我想检查切换状态是否为“显示”或“隐藏”

您误解了
切换（布尔值）
的功能；如果传递的布尔值的计算结果为
true
（或“truthy”），则它将显示元素，否则
false
（或“false”）值将隐藏调用
toggle（）
的元素

要检索是否显示元素，应计算布尔值本身（允许truthy/false值）：

或者更严格地说：

var isShown = showOrHide === true ? "Yes, it's shown" : "No, it's hidden";

您还可以使用jQuery的
.is（':visible'）
，它返回一个布尔值，描述调用它的元素对用户是可见的（
true
），还是隐藏的（
false
）：

一个非常简单的例子，说明了
的用法是（'visible'）
：


同样，一个测试布尔值本身的演示：

$('#toggleControl').on('change', function(){
    var checkbox = this;
    $('#demo').toggle(checkbox.checked);
    $('#status').text(function(){
        return checkbox.checked ? 'Shown' : 'Hidden';
    });
}).change();


两个演示都在以下HTML上运行：

<input type="checkbox" id="toggleControl" /><label for="toggleControl"> element</label>
<div id="status"></div>
<div id="demo">
    <p>Can be shown or hidden, by checking, or unchecking, the checkbox.</p>
</div>

元素
可以通过选中或取消选中复选框来显示或隐藏


参考资料：






这也可能有所帮助。作为其他答案的替代方案

var showOrHide = !$( "#foo" ).is(':visible');
$( "#foo" ).toggle( showOrHide );

showOrHide
的值是多少？我得到了空值。我已经初始化了变量“showOrHide”，但它没有返回任何信息。“它不工作”没有告诉我们如何调用
toggle（）
方法，也没有给我们任何信息，我们无法发布解释它为什么不工作或如何工作的答案。你能用什么HTML清楚地说明你在做什么，你在使用什么JavaScript/jQuery吗？目前，您似乎正在使用
toggle（）
作为获取工具，但实际上并没有这样做。一个实时的或类似的演示可能也很有用。我尝试过这个方法，但它返回一个空值，并且在像这样添加$（“#foo”）.toggle（showOrHide）时，切换功能不起作用；我并不期待这样的回答。因为我想检查切换状态是“显示”还是“隐藏”。
$('#toggleControl').on('change', function(){
    $('#demo').toggle(this.checked);
    $('#status').text(function(){
        return $('#demo').is(':visible') ? 'Shown' : 'Hidden';
    });
}).change();

$('#toggleControl').on('change', function(){
    var checkbox = this;
    $('#demo').toggle(checkbox.checked);
    $('#status').text(function(){
        return checkbox.checked ? 'Shown' : 'Hidden';
    });
}).change();

<input type="checkbox" id="toggleControl" /><label for="toggleControl"> element</label>
<div id="status"></div>
<div id="demo">
    <p>Can be shown or hidden, by checking, or unchecking, the checkbox.</p>
</div>

var showOrHide = !$( "#foo" ).is(':visible');
$( "#foo" ).toggle( showOrHide );