javascript - CSS + jquery 响应式背景颜色变化

Question

我想要实现的目标是，如果窗口大小大于 400，则 #box2 颜色变为黑色(悬停在 #box1 上时), 如果小于 400，#box2 颜色变为黄色。

我以为我完成了这个任务，但是我发现我总是需要刷新页面才能看到效果。一旦窗口大小改变，jQuery 不会立即工作。

我是否需要使用 ajax 或其他东西来使 jQuery 响应工作？

在线样本:http://jsfiddle.net/dFbXr/

这是我的代码

HTML:
    <div id="box1">
        <div id="box2"></div>
    </div>

jQuery:
    function colorchange(){
     if($(window).width() > 400){
        $("#box1").mouseover(function(){
        $("#box2").css('background','black');
         }).mouseout(function(){
             $("#box2").css('background','blue');
     });
      }else{
     $("#box1").mouseover(function(){
     $("#box2").css('background','yellow');
    }).mouseout(function(){
          $("#box2").css('background','blue');
    });
    }
    }      

    colorchange();

CSS:
    #box1{
        display: block;
        background:red;
        background-size: 100%;
        position: relative;
        padding-bottom: 60%;
    }

    #box2{
        display:block;
        background:blue;
        position:absolute;
        height:70px;
        width:70px;
        right:50%;
        top:50%;
        margin: -35px -35px 0 0;
      }

Answer 1

您需要在首次加载页面和调整窗口大小时调用您的 colorchange() 函数。您可以使用如下代码处理“调整大小”事件:

$(window).on("resize",colorchange);

请注意，colorchange 作为参数传递给 .on() function 没有括号，即 colorchange 而不是 colorchange()。不带括号传递函数的引用，带括号立即调用函数并传递其结果。

演示:http://jsfiddle.net/dFbXr/1/

您提到了 Ajax，但 Ajax 与手头的问题完全无关:它用于在不重新加载整个页面的情况下从 Web 服务器发送和/或接收数据。