usunąć/dodać klas CSS na zerwaniu z matchmedia.js

Question

Mam następujący kod, który działa prawidłowo, gdy rozmiar ekranu jest 770px i poniżej (jak określono przez pułapki):

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

Problem jest, gdy okno jest zmieniono rozmiar na 770px iw górę tracę klasy.

Jak zmienić klasę przy zmianie rozmiaru okna?

Answer 1

Musisz buforować selektory. Zobacz jsfiddle także:

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

odgadywanie, co masz zamiar się zmienia na stronę projektu, gdy zmiany multimedialne, dodając klas.

Wystarczy za pomocą CSS i multimedialne zapytania będzie to osiągnąć:

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

ale jeśli naprawdę chcesz to też być obsługiwane z javascript będę zalecamy użycie innej klasy jako markera, jak .adapt i zmiany kodu do:

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

chciałbym zaproponować, aby zapisać potrzebne klas w atrybucie data-770-classes.

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')); 
} 

Zakładam $j tworzy jQuery obiekt.

HTML wyglądałby następująco:

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

Answer 4

Można użyć element.className += "button", aby dodać klasę i .className = "" usunąć klasę, oto kod trzeba:

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