Как определить размер окна, а затем сделать что-то с помощью оператора jquery switch

Я хотел бы проверить размер окна с jquery и на основе различных разрешений, которые я хотел бы изменить фоновое изображение. Поэтому я думал, как-то использовать оператор "switch" для большего числа случаев, но я просто не знаю, как это будет выглядеть. Это базовая структура, которую я хочу, но с большим количеством опций:

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

Спасибо за вашу помощь.

Ответ 1

Оператор 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;
    ...
    ...
}

Ответ 2

Вы должны использовать:

$(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
}

EDIT - я не думаю, что использование оператора 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
}