Remove/add 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);

问题是当 window 被调整为 770px 并且我失去了我的 classes。

如何在 window 调整大小时更改 class？

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

猜猜你的目的是在媒体更改时更改设计页面，方法是添加 classes。

只需使用 css 和媒体查询即可实现：

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

但如果您真的希望它也被 javascript 处理，我建议使用另一个 class 作为标记，例如 .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" 添加 class 并使用 .className = "" 删除 class，这是您需要的代码：

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

Remove/add css 类在 matchmedia.js 的断点上

Remove/add css classes on breakpoint with matchmedia.js

javascript

css

responsive-design

matchmedia

Remove/add css 类 在 matchmedia.js 的断点上

Remove/add css classes on breakpoint with matchmedia.js

javascript

css

responsive-design

matchmedia

Remove/add css 类在 matchmedia.js 的断点上