Rimuovere/aggiungere classi CSS sul punto di interruzione con matchmedia.js

Question

Ho seguente codice che funziona bene quando la dimensione dello schermo è 770px e al di sotto (come determinato da punti di interruzione):

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

Il problema è quando la finestra è ridimensionato a 770px e fino a perdere le mie lezioni.

Come eseguire l'aggiornamento per cambiare classe al ridimensionamento della finestra?

Answer 1

È necessario memorizzare nella cache i selettori. Vedere jsfiddle così:

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

indovinare che cosa si sta andando per sta cambiando la pagina di progettazione, quando i cambiamenti dei media, con l'aggiunta di classi.

Semplicemente usando query CSS e dei media sarà raggiungere questo obiettivo:

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

, ma se si vuole veramente troppo che essere maneggiato con javascript te lo consiglia di utilizzare un'altra classe come marcatore, come .adapt e modificando il codice per:

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

vorrei suggerire per salvare le classi necessarie in un attributo 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')); 
} 

presumo $j crea un oggetto jQuery.

Il codice HTML sarà simile:

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

Answer 4

È possibile utilizzare element.className += "button" per aggiungere classe e .className = "" per rimuovere classe, ecco il codice è necessario:

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