6

こんにちは友人私はブラウザウィンドウの解像度に応じて動的にボディにクラスを追加しようとしています。これが私が使おうとしているコードですが、jQueryをまったく知らないので、それを調整するのに助けが必要です。

私が達成したいオプションは次のとおりです。

訪問者が私のサイトにアクセスしたら、このコードは次のルールに従って、ブラウザのウィンドウサイズを確認し、本文にクラスを追加する必要があります。

  1. ウィンドウサイズが1024pxより大きく1280pxより小さい場合は、クラスを追加し.w1280ます。

  2. ウィンドウサイズが1280pxより大きく1440pxより小さい場合は、クラスを追加し.w1440ます。

  3. ウィンドウサイズが1440pxより大きく1280pxより小さい場合は、クラスを追加し.w1680ます。

  4. ウィンドウサイズが1680pxを超える場合.wLargeは、クラスを追加します。

これを実現するために、次のスクリプトを使用しようとしています。私の質問は次のとおりです。

  1. これは正しいコードですか？そうでない場合、正しいコードは何ですか？

  2. これは可能な限り最短のコードですか？そうでない場合、正しいコードは何になりますか？

jQueryに関する私の知識はほとんどゼロなので、親切に助けてください。

function checkWindowSize() {  
    if ( $(window).width() > 1024) { 
        $('body').addClass('w1280');  
        } else {  
        $('body').removeClass('w1280');  
    } 
    if ( $(window).width() > 1280 ) { 
        $('body').addClass('w1440');  
        } else {  
        $('body').removeClass('w1440');  
    } 
    if ( $(window).width() > 1440) { 
        $('body').addClass('w1680');  
        } else {  
        $('body').removeClass('w1680');  
    } 
    if ( $(window).width() > 1600) { 
        $('body').addClass('wLarge');  
        } else {  
        $('body').removeClass('wLarge');  
    } 
}    
checkWindowSize()
4

2 に答える 2

9

要素に他のクラスを格納していない場合は、次のbodyようにすることができます。

function checkWindowSize() {
    var width = $(window).width();
    document.body.className = width > 1600 ? 'wLarge' :
                              width > 1440 ? 'w1680' :
                              width > 1280 ? 'w1440' :
                              width > 1024 ? 'w1280' : '';
}

switch声明でそれをするようにアドバイスする人もいるかもしれませんが、そうすると、子供を食べるのが好きな人もいます。

bodyこの関数は、呼び出されるたびに'sクラスを上書きします（ブラウザが1024ピクセル以下の場合、デフォルトではクラスはまったくありません）。したがって、body他のクラスがある場合は機能しません。維持する必要があります。

Šimeの提案に従って編集してください。これを行うためのより安全な方法は次のとおりです。

function checkWindowSize() {
    var width = $(window).width(),
    new_class = width > 1600 ? 'wLarge' :
                width > 1440 ? 'w1680' :
                width > 1280 ? 'w1440' :
                width > 1024 ? 'w1280' : '';

    $(document.body).removeClass('wLarge w1680 w1440 w1280').addClass(new_class);
}
于 2011-01-26T04:00:23.917 に答える
1

これは、Nainaのコメントのおかげでうまくいきました： https ：//www.quora.com/How-do-I-add-and-remove-CSS-classes-using-jQuery-based-on-the-screen-size

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
    $(document).ready(function () {
        if($(window).width() < 768) {
           $("#myDiv").addClass("myClass");
           $("#otherDiv").removeClass("myClass");  
        }    
    });
</script>
于 2018-05-23T01:19:12.443 に答える