在 jQuery 中显示另一个 div 时隐藏一个 div？答案

【问题标题】：hide one div when another is showing in jQuery?在 jQuery 中显示另一个 div 时隐藏一个 div？
【发布时间】：2013-02-04 02:13:21
【问题描述】：

当另一个 div 可见时，我试图隐藏一个 div。

我有 div 1 和 div 2。

如果 div 2 正在显示，那么 div 1 应该隐藏，如果 div 2 没有显示，那么 div 1 应该可见/取消隐藏。

该功能需要在页面加载时准备好功能/文档。

我已经尝试过了，但我没有任何运气，有人可以告诉我如何做到这一点。

<script>
    window.onLoad(function () {
        if ($('.div2').is(":visible")) {
             $(".div1").fadeOut(fast);

        } else if ($('.div2').is(":hidden")) {
            $('.div1').fadeIn(fast);

        }
    });
</script>

【问题讨论】：

标签： javascript jquery fadein fadeout

【解决方案1】：

为每个 div 添加一个 hidden 类，然后使用 jQuery 在该类之间切换。顺便说一句，window.onload 不是一个函数，它需要一个像 window.onload = function() {} 这样的字符串。另外，将fast 放在引号中。我不知道这是否是必需的，但 jQuery 就是这么说的。

<div class="div1"></div>
<div class="div2 hidden"></div>

.hidden { display: none }

$(document).ready(function() {

    if($(".div1").hasClass("hidden")) {
        $(".div2").fadeIn("fast");
    }

    else if($(".div2").hasClass("hidden")) {
        $(".div1").fadeIn("fast");
    }

});

【讨论】：

【解决方案2】：

您应该将字符串传递给.fadeIn() 和.fadeOut() 方法。

而不是.fadeIn(fast)，它将是.fadeIn("fast")。 .fadeOut() 也一样。

一般来说，既然您已经在使用 jQuery，最好像这样包装您的代码：

$(function () {
    // Code goes here
});

【讨论】：

【解决方案3】：

看起来您正在使用 jquery 选择器（一个 javascript 库）。如果您要使用 jquery，请确保将库包含在文档标题中来正确加载（谷歌通过为您托管它使这很容易
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>）

加载 jQuery 后，您可以这样做

$(document).ready(function(){
if ($('.div1').is(":visible")) {
$('div2').hide();
}

else if ($('.div2').is(":visible")) {
$('div1').hide();
}

});

工作示例：http://jsfiddle.net/HVDHC/ - 只需将 display:none 从 div 2 更改为 div 1，然后单击“运行”即可看到它的替代品。

【讨论】：

我发现 jQuery 的托管更安全、更轻松、更可靠http://code.jquery.com/jquery.min.js 它加载了绝对最新和最小的版本。网址也短了很多。
好提示！我一直使用谷歌，因为我认为它更可靠。

【解决方案4】：

您可以使用 setTimeout 或 setInterval 来跟踪这些 div 是否存在

$(function() {
  var interval = window.setInterval(function() {
    if($('#div2').hasClass('showing')) {
      $('#div1').fadeOut('fast');
    }      
    if($('#div2').hasClass('hidden')) {
      $('#div1').fadeIn('fast');
    }
  }, 100);

  // when some time u don't want to track it
  // window.clearInterval(interval)
})

为了更好的性能

var div1 = $('#div1')
  , div2 = $('#div2')


var interval ....
// same as pre code

【讨论】：