javascript - 如何跟踪菜单中的 css 类？

Question

我们有以下菜单，其中有一个 ul > li > a在 <a> 中添加了 CSS 类的结构标签。当断点小于 768px 时，我们要删除 CSS 类。在页面加载时，我可以毫无问题地添加和删除 CSS 类，但如果将窗口调整为大于 768 像素(宽度)，我将无法重新添加 CSS 类。

棘手的部分是 CSS 类可能并不总是 color--red例如。它们可能是不同的，例如 bkg--black或者是其他东西。我正在考虑为每个 <a> 存储一个数组, 但发现在 on load和 resize函数，它们不接收数组。

我将如何根据 <a> 跟踪 CSS 类并在使用 jQuery 调整窗口大小时将它们添加回来？

这是我们尝试过的

$(function() {
  $(window).on('load', function() {
    if($(window).width() < 768) {
      var el = $('#someid');
      el.find("a").prop("class", function(i, cls) {
        return cls.replace(/(^|\s)(color)--\S+/g, '');
      });
    }
  });
  
  $(window).resize(function() {
    if($(window).width() < 768) {
      var el = $('#someid');
      el.find("a").prop("class", function(i, cls) {
        return cls.replace(/(^|\s)(color)--\S+/g, '');
      });
    }
    else {
      // Stuck here. 
    }
  });
});

.color--red { color: red; }
.color--blue { color: blue; }
.color--green { color: green; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="someid">
<li><a class="color--red">Seamlessly brand equity invested infomediaries for.</a></li>
<li><a class="color--blue">Seamlessly brand equity invested infomediaries for.</a></li>
<li><a class="color--green">Seamlessly brand equity invested infomediaries for.</a></li>
</ul>

Answer 1

我得到这个是为了与 CSS 一起工作。

@media screen and (min-width: 768px) {
  .color--red { 
    color: red; 
  }

  .color--blue { 
    color: blue; 
  }
  .color--green { 
    color: green; 
  }
}

.color--red { 
  color: initial; 
}

.color--blue { 
  color: initial; 
}
.color--green { 
  color: initial; 
}

<ul id="someid">
<li><a class="color--red">Seamlessly brand equity invested infomediaries for.</a></li>
<li><a class="color--blue">Seamlessly brand equity invested infomediaries for.</a></li>
<li><a class="color--green">Seamlessly brand equity invested infomediaries for.</a></li>
</ul>