0

私が達成したい目標は、ウィンドウサイズが400より大きい場合、#box2色が黒に変わり（オンにすると#box1）、400より小さい場合、#box2色が黄色に変わることです。

このタスクを完了したと思いましたが、効果を確認するには常にページを更新する必要があることがわかりました。ウィンドウサイズが変更されると、jQueryはすぐには機能しません。

jQueryを動作に応答させるには、ajaxなどを使用する必要がありますか？

オンラインサンプル： 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;
      }
4

3 に答える 3

3

colorchange()ページが最初にロードされたときと、ウィンドウのサイズが変更されたときの両方で、関数を呼び出す必要があります。次のようなコードで処理できる「サイズ変更」イベントがあります。

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

は括弧なしで関数colorchangeにパラメーターとして渡されることに注意してください。つまり、 ではありません。括弧なしでは関数への参照が渡され、括弧ありではすぐに関数が呼び出され、その結果が渡されます。.on() colorchangecolorchange()

デモ: http://jsfiddle.net/dFbXr/1/

あなたはAjaxについて言及しましたが、Ajaxは当面の問題とはまったく関係ありません.Ajaxは、ページ全体をリロードせずにWebサーバーからデータを送受信するためのものです。

于 2013-03-04T21:21:52.817 に答える
1

関数を呼び出すのは 1 回だけです。colorchange()ウィンドウのサイズが変更されるたびにもう一度呼び出す必要があります。

この jQuery をコードに追加する必要があります。

$(window).on("resize",colorchange);
于 2013-03-04T21:23:17.030 に答える
0

ブラウザーのみをサポートCSS3していて、JavaScript に依存したくない場合は、メディア クエリを使用して:hover、画面サイズごとの効果を変更することで、同じことを実現できます。

Here's a quick example: http://jsfiddle.net/dFbXr/2/

于 2013-03-04T21:28:19.147 に答える