Question

当我看到另一个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>

Answer 1

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

<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");
    }

});

Answer 2

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

而不是.fadeIn(fast)它将是.fadeIn("fast")。与.fadeOut()相同。

一般来说，因为你已经在使用jQuery，所以最好像这样包装你的代码：

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

Answer 3

您可以使用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

Answer 4

看起来你正在使用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/ - 只需将显示：无从div 2更改为div 1，然后点击“运行”即可将其替换为

。

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

4 个答案: