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

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

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

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


if-statement jquery css switch-statement window-resize
person Mr. Sam    schedule 05.09.2011    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Оператор 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;
    ...
    ...
}
person peirix    schedule 05.09.2011
comment
Да, я думаю, что вы правы, @peirix, я имею в виду, что я уверен, что вы правы в отношении оператора switch, но я надеялся как-то реализовать его, например, проверить только ширину экрана, и если это соответствует случаю, то сделайте что-нибудь ... но я думаю, что я буду придерживаться if-elseif - person Mr. Sam; 05.09.2011
comment
Вы можете включить диапазоны, если сделаете что-то вроде этого: switch(true) { case windowWidth ›= 1 && windowWidth ‹=5: break; case windowWidth ›=6 && windowWidth ‹= 10: перерыв; } - person hdctambien; 15.09.2014

arrow_upward
53
arrow_downward

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

$(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
}
person Nicola Peluchetti    schedule 05.09.2011
comment
Спасибо @Nicola Peluchetti, но мне бы хотелось больше случаев, например, с оператором switch. - person Mr. Sam; 05.09.2011