可见性if语句：如果css显示不是none，做

Question

我有这个 Javascript 功能，但它不起作用。括号中没有错误。我知道，这也可以通过可见性来完成，但就我而言，这似乎更好，如果可能的话，我想继续使用它。

我有三个按钮，通过悬停每个按钮，匹配的 div 将淡入（.one、.two、.three）。该代码（此处未显示）已经运行良好。

现在我想显示 .hello，当所有三个 div 都淡入时（也就是显示不再像我在 CSS 文件中写的那样 'none'，因为 Javascript 通过淡入淡出来改变它，对吧？）。

CSS:

.hello {
    display: none; }

Javascript:

jQuery(function() {

    if (jQuery('.one').css('display') !== ('none') &&
        jQuery('.two').css('display') !== ('none') &&
        jQuery('.three').css('display') !== ('none')) {

            jQuery('.hello').fadeIn();
        }
});

有什么问题吗？

Answer 1

我确信有更好的解决方案，但它首先出现在我的脑海中。该函数应该在更改时执行一次。

//you did this part already.
$("#1st").hover(function(){
  $(".one").fadeIn();
});
$("#2nd").hover(function(){
  $(".two").fadeIn();
});
$("#3rd").hover(function(){
  $(".three").fadeIn();
});

//checks when hover
$("#1st,#2nd,#3rd").hover(function(){
    // same code 
    if (jQuery('.one').css('display') !== ('none') &&
        jQuery('.two').css('display') !== ('none') &&
        jQuery('.three').css('display') !== ('none')) {
            jQuery('.hello').fadeIn();
        }
})

.one,.two,.three,.hello{
display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" id="1st" value="1">
<input type="button" id="2nd" value="2">
<input type="button" id="3rd" value="3">
<br><br>
<div class="one">1.content</div>
<div class="two">2.content</div>
<div class="three">3.content</div>
<br><br>
<div class="hello">Hello!</div>

可见性if语句：如果css显示不是none，做

Visability if statement: if css display is not none, do

javascript

jquery

visibility

if-statement

display