Как добавить / удалить или переключать классы в зависимости от ширины экрана? - PullRequest
Новая
       61

Как добавить / удалить или переключать классы в зависимости от ширины экрана?

0 голосов
/ 29 апреля 2020

Простите, если на этот вопрос ответили, так как я изо всех сил пытаюсь найти подобный сценарий (который я нахожу на базаре, поскольку я уверен, что это обычный сценарий для запуска).

По сути, я хотел бы переключать или даже добавлять и удалять класс в зависимости от ширины экрана. Ниже приведена моя попытка создания сценария, в котором eventlistener работает на основе colsole.log, но я не могу заставить функцию переключать классы.

В основном я хотел бы:

  • включить класс .mobile на и .desktop выключить для всех элементов, которые иметь класс .respiveive, когда ширина вида меньше 700px

  • , а затем выключить класс .desktop на и .mobile выключить для все элементы, имеющие класс .responsive, когда ширина представления превышает 701px.

Моя попытка: 

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

(Закомментированные части - это те части, которые, я думаю, должны go сценария, но в итоге они нарушают журнал консоли, вероятно, из-за неправильного синтаксиса.)

Кроме того, если то, что я пытаюсь достичь, не является стандартным для отрасли способом сделать это, я более чем рад, что мне посоветовали альтернативные способы достижения того же самого. ,

1 Ответ

0 голосов
/ 29 апреля 2020

Я использовал метод forEach вместо al oop, вы можете поменять его.

В вашем коде было несколько ошибок, которые выглядят следующим образом:

  • По ошибке вы имеете добавлен = оператор для метода.
  • В операторе else вы не удаляете класс mobile, а добавляете его снова.

Проверьте ниже Я исправил код Надеюсь, что это решено ваша проблема. 

  window.addEventListener("resize", function() {
  var w = window.innerWidth;
  console.log(w)
  var responsiveDiv = document.querySelectorAll('.responsive');

responsiveDiv.forEach((element) => {
console.log(element)
 if(w < 700) {
        element.classList.remove("desktop");
        element.classList.add("mobile");
        console.log("desktop Remove");
      } else {
      element.classList.remove("mobile");
       element.classList.add("desktop");
       
        console.log("mobile removed");
      } 

})

     
      
    });
.responsive{min-width: 100vw; min-height: 100vh;}
<div class='responsive'>1</div>
<div class='responsive'>2</div>
<div class='responsive'>3</div>
...