web-dev-qa-db-fra.com

Comment détecter la taille de la fenêtre, puis faire quelque chose avec l'instruction jquery switch

je voudrais vérifier la taille de la fenêtre avec jquery et en fonction des différentes résolutions je voudrais changer l'image d'arrière-plan. Donc, je pensais utiliser en quelque sorte la déclaration "switch" pour plus de cas, mais je ne sais pas à quoi cela ressemblerait. C'est la structure de base que je veux, mais avec plus d'options:

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

Merci de votre aide.

jqueryif-statementswitch-statementwindow-resizecss
16
Mr. Sam

L'instruction switch ne vous permettra pas de faire des choses comme la vérification des nombres entre certaines valeurs, et elle ne vous permettra pas non plus de vérifier plusieurs variables ...

Donc, pour ce scénario particulier, je pense que le meilleur ajustement est en fait juste une liste de if-elseif déclarations, comme vous êtes déjà sur le point de le faire.

Faire des "vérifications de plage" dans switch est vraiment verbeux:

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

Tu devrais utiliser:

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

et ensuite vous pourriez faire:

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

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

EDIT - je ne pense pas que l'utilisation d'une instruction switch soit utile dans ce cas. L'instruction switch n'est qu'un moyen alternatif pour la notation if ... else que dans ce cas je trouve plus utile car vous avez plusieurs comparaisons à faire:

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