jQuery : Ajouter une classe dynamiquement en fonction de la résolution de la fenêtre du navigateur

Bonjour les amis je suis en train d'ajouter une classe au corps de manière dynamique en fonction de la résolution de la fenêtre de navigateur. Voici le code que j'essaie de l'utiliser, mais besoin d'aide tuning comme je ne sais pas jQuery.

Les options que je veux réaliser sont :

Une fois qu'un visiteur vient sur mon site, ce code doit vérifier son navigateur windows taille et ajouter une classe au corps que par les règles suivantes

Si la taille de la fenêtre est plus de 1024px mais moins de 1280px puis ajouter une classe .w1280.
Si la taille de la fenêtre est plus de 1280px mais moins de 1440px puis ajouter une classe .w1440.
Si la taille de la fenêtre est plus de 1440px mais moins de 1280px puis ajouter une classe .w1680.
Si la taille de la fenêtre est plus de 1680px puis ajouter une classe .wLarge.

Pour atteindre cet objectif, j'essaie d'utiliser le script suivant. Mes questions sont les suivantes:

Est-ce la bon code? Si non quel est le bon code?
Est-ce la meilleure plus court possible code? Si non ce sera le bon code?

Aide gentiment que ma connaissance de jQuery est presque à ZÉRO.

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

OriginalL'auteur Vikram Rao | 2011-01-26

8

Si vous n'êtes pas le stockage de toutes les autres classes sur le body élément, vous pourriez faire ceci:
```
function checkWindowSize() {
    var width = $(window).width();
    document.body.className = width > 1600 ? 'wLarge' :
                              width > 1440 ? 'w1680' :
                              width > 1280 ? 'w1440' :
                              width > 1024 ? 'w1280' : '';
}
```
Certaines personnes pourraient vous conseiller de le faire avec un switch déclaration, mais ensuite, certaines personnes aiment aussi manger leurs jeunes.

Cette fonction supprime le body's de la classe à chaque fois qu'il est appelé (la valeur par défaut, si le navigateur est plus petit que ou égal à 1024 pixels, n'est pas classe du tout), donc, comme je l'ai dit, il ne fonctionnera pas si votre body a d'autres classes qui doivent être maintenues.

MODIFIER Par Šime suggestions, voici un moyen plus sûr de le faire:
```
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);
}
```
Pas besoin de remplacer la propriété className tout à fait. Il suffit de mettre la chaîne dans une variable: var c = width ... et puis: c && $('body').addClass(c);
Mais si cette fonction est appelée plusieurs fois (comme, par exemple, lorsque l'utilisateur redimensionne la fenêtre), il serait bon de se débarrasser des anciens, n'est plus pertinente classes.
L'OP n'a pas dit qu'il a l'intention de l'appeler plusieurs fois. Mais indépendamment de cela, vous ne voulez pas supprimer toutes les classes, depuis d'autres scripts peut être en ajoutant des noms de classe. Ce serait la voie à suivre: $('body').removeClass('w1280 w1440 w1680 wLarge').addClass(c);
Vous avez raison; j'ai oublié de jQuery pourrait supprimer plusieurs classes en même temps.
Donc @sdl est-ce la bonne syntaxe avec @sim suggestion? sinon je demande @sim veuillez fournir une syntaxe correcte que par ses suggestions?

OriginalL'auteur sdleihssirhc

Cela a fonctionné pour moi grâce à Naina commentaire ici:
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>

OriginalL'auteur user3669077

Vous devez vous connecter pour publier un commentaire.