onresize, кажется, не работает, когда в цикле (JavaScript)

Question

Я пытаюсь вызвать функцию, основанную на размере экрана внутри цикла ".

Функция отлично работает, когда страница загружена, однако содержимое не изменяется при изменении размера окна.

Вот пример: https://jsfiddle.net/celine305/BaNRq/27/

Любая помощь приветствуется.

for (var i = 0; i < 2; i++) {
  function red() {
    $('#' + i + '').css('background', '#B60C0C')
      .text('Screen Size RED');
  }

  function orange() {
    $('#' + i + '').css('background', '#EBAE10')
      .text('Screen Size ORANGE');
  }

  function green() {
    $('#' + i + '').css('background', '#83ba2b')
      .text('Screen Size GREEN');
  }

  var widths = [0, 500, 850];

  function resizeFn() {
    if (window.innerWidth >= widths[0] && window.innerWidth < widths[1]) {
      red();
    } else if (window.innerWidth >= widths[1] && window.innerWidth < widths[2]) {
      orange();
    } else {
      green();
    }
  }
  resizeFn();
  window.onresize = resizeFn();
}

Answer 1

1. Переместите свои функции за пределы for петля
2. Объединить 3 функции в одну
3. Используйте слушатель jQuery вместо JavaScript, так как вы уже используете jQuery

---

// You could also assign classes and use $(".className") instead of loop
function changeColor(color) {
    for(var i=0; i<2; i++){
        $('#'+i+'').css('background',color).text('Screen Size' + color);
    }
}

var widths = [0, 500, 850];

function resizeFn() {
    if (window.innerWidth>=widths[0] &&window.innerWidth<widths[1]) {
        changeColor('#B60C0C');
    } else if (window.innerWidth>=widths[1] && window.innerWidth<widths[2]) {
        changeColor('#EBAE10');
    } else {
        changeColor('#83ba2b');
    }
}

resizeFn();
$(window).resize(function() {
    console.log("resize");
    resizeFn();
})

JSFiddle отображает содержимое внутри div поэтому ваш код никогда не обнаруживал изменение размера. Я добавил контейнер для определения размера, но в противном случае вы должны использовать $(window) ,

Скрипка: https://jsfiddle.net/BaNRq/29/

Answer 2

Если вы хотите использовать текущий код, вам, вероятно, придется переместить объявления функций за пределы цикла for. Смотрите эту статью.

В качестве дополнительного примечания, я бы порекомендовал отойти от javascript для обработки этих изменений стиля. CSS предлагает хороший способ обработки изменений стиля для заданных размеров в форме медиазапросов.

Answer 3

Кажется, весь смысл вашего цикла заключается в выборе элементов. Вы можете сделать это намного проще, выбрав все свои элементы одним запросом:

$("#1, #2")

Поскольку вы делаете ВСЕ в цикле, вы переопределяете функции и назначаете функцию изменения размера несколько раз.

Да, и, кстати, вы на самом деле не назначаете функцию обработчику событий window.onresize, а возвращаете значение функции. Попробуйте назначить его без конечных скобок.