Remove/add CSS-Klassen auf Breakpoint mit matchmedia.js

Question

ich folgenden Code haben, der gut arbeitet, wenn die Bildschirmgröße 770px und unten (wie durch Haltepunkte festgelegt):

var handleMatchMedia = function (mediaQuery) { 
     if (mediaQuery.matches) { 

     $j(".view-all a").removeClass("button"); 
     $j(".view-all").removeClass("view-all"); 

    } else { 

     $j(".view-all a").addClass("button"); 
     $j(".view-all").addClass("view-all"); 
    } 
}, 

mql = window.matchMedia('all and (max-width: 770px)'); 

handleMatchMedia(mql); 
mql.addListener(handleMatchMedia); 

Das Problem ist, wenn das Fenster Größe geändert zu 770px und oben verliere ich meine Klassen.

Wie kann man die Klasse bei der Fenstergrößenänderung ändern?

Answer 1

Sie müssen Ihre Selektoren zwischenspeichern. Siehe jsfiddle auch:

var viewAll = $j(".view-all") 
    , buttons = $j(".view-all a") 
    , handleMatchMedia = function (mediaQuery) { 
    if (mediaQuery.matches) { 
     buttons.removeClass("button"); 
     viewAll.removeClass("view-all"); 
    } else { 
     buttons.addClass("button"); 
     viewAll.addClass("view-all"); 
    } 
    } 
    , mql = window.matchMedia('all and (max-width: 770px)'); 

handleMatchMedia(mql); 
mql.addListener(handleMatchMedia); 

Answer 2

Erraten was du für verändert die Design-Seite bei Medienwechsel, durch Klassen hinzufügen.

einfach mit CSS und Medien-Anfragen wird dies erreichen:

@media all and (max-width: 770px) { 
    .viewall a { 
    color: blue; 
    } 
} 

aber wenn Sie auch wirklich wollen, dass es mit Javascript behandelt werden Ich werde empfehlen, eine andere Klasse als Marker, wie .adapt und den Code zu ändern:

var handleMatchMedia = function (mediaQuery) { 
    if (mediaQuery.matches) { 
     $j(".adapt a").removeClass("button"); 
     $j(".adapt").removeClass("view-all"); 
    } else { 
     $j(".adapt a").addClass("button"); 
     $j(".adapt").addClass("view-all"); 
    } 
}, 

mql = window.matchMedia('all and (max-width: 770px)'); 

handleMatchMedia(mql); 
mql.addListener(handleMatchMedia); 

Answer 3

ich würde vorschlagen, die benötigten Klassen in einem data-770-classes Attribute zu speichern.

if (mediaQuery.matches) { 
    buttons.removeClass(buttons.attr('data-770-classes')); 
    viewAll.removeClass(viewAll.attr('data-770-classes')); 
} else { 
    buttons.addClass(buttons.attr('data-770-classes')); 
    viewAll.addClass(viewAll.attr('data-770-classes')); 
} 

Ich gehe davon aus $j schafft ein jQuery Objekt.

Die HTML würde wie folgt aussehen:

<div class="view-all" data-700-classes="view-all">...</div> 

Answer 4

Sie element.className += "button" Klasse hinzufügen können und .className = "" Klasse zu entfernen, dann ist hier der Code, den Sie brauchen:

var viewAll = document.getElementsByClassName("view-all")[0]; 
var buttons = viewAll.getElementsByTagName("a"); 
var handleMatchMedia = function (mediaQuery) { 
    if (mediaQuery.matches) { 
    buttons.className += "button"; 
    viewAll.className = ""; 
    } else { 
    buttons.className += "button"; 
    viewAll.className += "view-all"; 
    } 
} 
var mql = window.matchMedia('all and (max-width: 770px)'); 

handleMatchMedia(mql); 
mql.addListener(handleMatchMedia);