Из JQuery в JavaScript или Разрешение экрана

187

22 августа 2019, 16:50

Помогите плиз переписать в чистый js или подскажите как сделать так что бы этот код запускался на определенном экране.

var allOptions = $("#w0").children('li:not(.init)'); 
$("#w0").on("click", "li:not(.init)", function() { 
  allOptions.removeClass('selected'); 
  $(this).addClass('selected'); 
  $("#w0").children('.init').html($(this).html()); 
  allOptions.toggle(); 
});

Я пробовал это сделать вот так

$(window).resize(function() { 
  if ($(window).width() < 568) { 
    var allOptions = $("#w0").children('li:not(.init)'); 
    $("#w0").on("click", "li:not(.init)", function() { 
      allOptions.removeClass('selected'); 
      $(this).addClass('selected'); 
      $("#w0").children('.init').html($(this).html()); 
      allOptions.toggle(); 
    }); 
  } 
});

Но JS ругается на $ и перестает работать.

Answer 1

$(window).resize(function() {
    if ($(window).width() < 568) {
      var allOptions = $("#w0").children('li:not(.init)');
      $("#w0").on("click", "li:not(.init)", function() {
        allOptions.removeClass('selected');
        $(this).addClass('selected');
        $("#w0").children('.init').html($(this).html());
        allOptions.toggle();
      });
    }
  });
  // Vanilla JS
  window.onresize = () => {
      const width = window.innerWidth;
      if (width < 568) {
          const w0 = document.getElementById('#w0');
          const options = Array.from(w0.children).filter(element => !element.classList.contains('init'));
          const options2 = Array.from(w0.children).filter(element => element.classList.contains('init'));
          options.forEach(element => {
              element.addEventListener('click', (event) => {
                  options.forEach(x => {
                      x.classList.toggle('selected');
                  });
                  event.target.classList.add('selected');
                  options2.forEach(v => {
                      v.innerHTML = event.target.innerHTML;
                  });
                  options.forEach(z => {
                      const s = z.style.display;
                      z.style.display = s == 'block' ? 'none' : 'block';
                  });
              });
          })   
      }
  }