web-dev-qa-db-ja.com

ウィンドウサイズを検出し、jquery switchステートメントで何かを行う方法

jqueryでウィンドウサイズを確認し、さまざまな解像度に基づいて背景画像を変更したいと思います。それで、私はどういうわけかより多くの場合に「switch」ステートメントを使用することを考えていましたが、これがどのように見えるかわかりません。これは私が欲しい基本的な構造ですが、より多くのオプションがあります：

if ((screen.width>=1024) && (screen.height>=768)) {
 //do something
}
else {
//do something else
}

ご協力いただきありがとうございます。

jqueryif-statementswitch-statementwindow-resizecss
16
Mr. Sam

switchステートメントでは、特定の値の間の数値をチェックするようなことはできません。また、複数の変数をチェックすることもできません...

したがって、この特定のシナリオでは、実際のところ、if-elseifステートメント。既に実行中です。

switchで「範囲チェック」を行うことは本当に冗長です：

switch(windowWidth) {
    case 1:
    case 2:
    case 3:
    case 4:
    case 5:
        //Do something if value is less than or equal to 5
        break;
    case 6:
    case 7:
    case 8:
    case 9:
    case 10:
        //Do something if value is higher than 5 AND less than or equal to 10
        break;
    ...
    ...
}
1
peirix

あなたは使うべきです：

$(window).width();   // returns width of browser viewport
$(document).width(); // returns width of HTML document

$(window).height();   // returns heightof browser viewport
$(document).height(); // returns height of HTML document

そして、あなたはそうすることができます：

var width = $(window).width(); 
var height = $(window).height(); 

if ((width >= 1024  ) && (height>=768)) {
 //do something
}
else {
//do something else
}

編集-この場合、switchステートメントを使用することは有用ではないと思います。 switchステートメントは、if ... else表記の代替方法にすぎません。この場合は、複数の比較を行う必要があるため、より便利です。

if ((width >= 1280) && (height>=1024)) {
 //do something
}
else if ((width >= 1024  ) && (height>=768)){
//do something else
} else if ((width >= 800) && (height>=600)){
//do something else
}else{
//do something else
}
48
Nicola Peluchetti