Удалите / добавьте классы CSS на точку останова с matchmedia.js

Question

У меня есть следующий код, который отлично работает, когда размер экрана 770px и ниже (определяется точками останова):

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

Проблема в том, когда окно изменено в 770px и до я теряю свои уроки.

Как добиться изменения класса при изменении размера окна?

Answer 1

Вам нужно кэшировать ваши селекторы. Смотрите также jsfiddle:

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

Угадай, что ты собираешься - это изменить дизайн страницы при смене медиа, добавив классы.

Простое использование CSS и медиа-запросов позволит добиться этого:

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

но если вы действительно хотите, чтобы он тоже обрабатывался с помощью javascript, я рекомендую использовать другой класс в качестве маркера, например .adapt и изменив код на:

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

Я бы предложил сохранить необходимые классы в 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'));
}

Я предполагаю $j создает jQuery объект.

HTML будет выглядеть так:

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

Answer 4

Ты можешь использовать element.className += "button" добавить класс и .className = ""чтобы удалить класс, вот код, который вам нужен:

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