jQuery : Klasse Hinzufügen, die dynamisch je nach browser-Fenster Auflösung

Hallo Freunde, ich versuche eine Klasse Hinzugefügt werden, um Körper dynamisch in Abhängigkeit der browser-Fenster-Auflösung. Hier ist der code, den ich versuche zu benutzen, aber brauche Hilfe tuning, wie ich es nicht weiß, jQuery auf alle.

Den Optionen, die ich erreichen möchte sind :

Sobald ein Besucher kommt auf meine Seite, muss dieser code überprüfen Sie die browser-Fenster Größe und Klasse hinzufügen, um Körper, wie pro die folgenden Regeln

Wenn die Größe der Fenster ist mehr als 1024px aber weniger als 1280px dann fügen Sie der Klasse .w1280.
Wenn die Größe der Fenster ist mehr als 1280px aber weniger als 1440px dann fügen Sie der Klasse .w1440.
Wenn die Größe der Fenster ist mehr als 1440px aber weniger als 1280px dann fügen Sie der Klasse .w1680.
Wenn die Größe der Fenster ist mehr als 1680px dann fügen Sie der Klasse .wLarge.

Um dies zu erreichen, bin ich versucht, das folgende Skript verwenden. Meine Fragen sind:

Ist dies die richtigen code? Wenn nicht, was ist der richtige code?
Ist dies die beste kürzester code? Wenn nicht, was wird der richtige code?

Bitte helfen, da meine Kenntnisse von jQuery, ist fast gleich NULL.

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

InformationsquelleAutor Vikram Rao | 2011-01-26

8

Wenn Sie nicht speichern andere Klassen auf die body element, Sie könnten dies tun:
```
function checkWindowSize() {
    var width = $(window).width();
    document.body.className = width > 1600 ? 'wLarge' :
                              width > 1440 ? 'w1680' :
                              width > 1280 ? 'w1440' :
                              width > 1024 ? 'w1280' : '';
}
```
Einige Leute könnten Ihnen raten, tun Sie es mit einem switch Aussage, aber dann, einige Leute mögen auch Essen Ihre Jungen.

Diese Funktion überschreibt die body's Klasse, jedes mal, wenn es heißt (die Standardeinstellung, wenn der browser kleiner als/gleich 1024 Pixel ist keine Klasse überhaupt), so wie ich sagte, es wird nicht funktionieren, wenn Ihr body andere Klassen, die betreut werden müssen.

BEARBEITEN Pro Šime Vorschläge, hier ist ein sicherer Weg, es zu tun:
```
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);
}
```
Keine Notwendigkeit zum überschreiben der className-Eigenschaft insgesamt. Setzen Sie einfach die Zeichenfolge in eine variable: var c = width ... und dann: c && $('body').addClass(c);
Aber wenn diese Funktion mehrfach aufgerufen werden (wie, sagen wir, wenn der Benutzer die Fenstergröße ändert), wäre es gut, um loszuwerden, ältere, nicht mehr relevante Klassen.
Der OP hat nicht gesagt, dass er beabsichtigt, rufen Sie es mehrfach. Aber unabhängig davon, dass Sie nicht möchten, löschen alle Klassen, da andere Skripte werden kann, anfügen Klasse Namen. Dies wäre der Weg zu gehen: $('body').removeClass('w1280 w1440 w1680 wLarge').addClass(c);
Du hast Recht; ich habe vergessen jQuery entfernen konnte mehrere Klassen zur gleichen Zeit.
Also @sdl ist dies die richtige syntax mit @sim ' s Vorschlag? ansonsten kann ich @sim bitte geben Sie eine korrekte syntax nach seinen Anregungen?

InformationsquelleAutor sdleihssirhc

Dieser arbeitete für mich, Dank Naina ' s Kommentar hier:
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>

InformationsquelleAutor user3669077

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.