如何根据屏幕宽度添加/删除或切换类？

Question

请原谅我，如果我正在努力寻找类似的情况（我找到了集市，因为我确信这是一个运行的常见脚本），就已经回答了。

[基本上，我想根据屏幕宽度来切换甚至添加和删除一个类。下面是我尝试的脚本，其中eventlistener基于colsole.log运行，但是我无法获得切换类的功能。

基本上，我想：

• 当视图宽度小于700px时，将所有具有类.response的元素转换为.mobile on和.desktop off”>

• 然后，当视图宽度大于701px时，对所有具有响应类的元素打开.desktop on

和.mobile off类。

我的尝试：

  window.addEventListener("resize", function() {
  var w = window.innerWidth;
  var responsiveDiv = document.querySelectorAll('.responsive')[0];
  //for (var i = 0; i < responsiveDiv.resize; i++) 
  {

//responsiveDiv[i].addEventListener('resize', function() {

      if (w < 700) {
        //responsiveDiv.classList.remove('desktop');
        responsiveDiv.classList.remove=("desktop");
        responsiveDiv.classList.add("mobile");
        console.log("desktop Remove");
      } else {
       responsiveDiv.classList.add("mobile");
        console.log("mobile removed");
      } }
    });
（被注释掉的部分是我认为需要执行脚本的部分，但是最终它们会破坏控制台日志，可能是因为语法错误。）

[此外，如果我尝试实现的目标不是行业标准的实现方式，我很乐意被告知可以实现同一目标的替代方式。

请原谅我，如果我正在努力寻找类似的情况（我找到了集市，因为我确信这是一个运行的常见脚本），就已经回答了。基本上，我想切换甚至添加...

Answer 1

我使用了forEach方法而不是循环，您可以互换它。