jquery - 如果 'X' div 可见，则 'Y' div 隐藏。如果 'X' div 隐藏，则 'Y' div 可见

Question

我正在建立一个网站，并有一个幻灯片。幻灯片有标题和索引，覆盖整个页面。当覆盖被激活时，标题需要消失。当覆盖层被停用时，通过单击退出按钮、缩略图链接或菜单链接，字幕必须返回。

这就是我目前所拥有的

    if($('#indexpage').css('display') == 'none'){ 
    $('#imageinfo').css('visibility') == 'visible'} 
    else { 
    $('#imageinfo').hide('slow'); 
    }

我一生都无法弄清楚如何让它发挥作用。任何帮助将不胜感激。

谢谢

Answer 1

在控制显示或隐藏一个元素或另一个元素的代码中，您应该简单地使用 .toggle() :

$("#indexpage,#imageinfo").toggle();

然后每次调用.toggle()时，可见的将被隐藏，隐藏的将可见。

这假设您已经将 css 设置为默认显示一个，另一个隐藏。因此，您页面的 CSS 应包含:

#indexpage {
    display: none;
}

如果这对您不起作用，并且您仍然想根据另一个是否可见来显示或隐藏一个，请使用 .toggle()传递一个 bool 参数，指示是否显示或隐藏元素。使用 .is() 获取该 bool 值和 :visible .

$("#imageInfo").toggle(!$("#indexpage").is(":visible"));

编辑:请注意，您的示例不起作用有几个原因。

首先，您似乎正在尝试将 .hide() 与 .css("visibility") 一起使用。但是，.hide() 将元素的 display 设置为 none。一旦设置，visibility 值将不起作用。 .hide() 的推论是 .show()。但 .toggle() 有时可能是首选，因为它封装了 .hide() 和 .show() 的功能。当您想要根据特定条件显示或隐藏元素时尤其如此。在这种情况下，将 bool 值传递给 .toggle() 指示元素是否可见。您可以从此减少代码:

if (checkSomeCondition()) {
    $("#myElement").show();
}
else {
    $("#myElement").hide();
}

仅一行代码:

$("#myElement").toggle(checkSomeCondition());

其次，代码失败的另一个原因是您正在评估可见性的值，而不是分配可见性值。 == 运算符是相等运算符，它比较两个值并返回一个 bool 值。要赋值，您需要使用赋值运算符(=):

var a = 1;
a == 2;  // returns false, a is unchanged
a = 2;   // now a is 2

但是，在这种情况下您不会使用赋值运算符，因为您无法为函数调用的结果赋值。即，someFunction() = 1 是无效的 JavaScript。在 jQuery 中，要读取值，可以使用单个参数。要写入值，请传递第二个参数，指示新值:

$('#imageinfo').css('visibility', 'visible');

这可以纠正语法，但由于上面的第一个问题，它并不能解决您的问题 - 您需要设置 display 而不是 visibility。