Почему не выполняются условия скрипта $(window).resize?

Question

[ligisayan]

Привет! Есть на сайте товарные секции, в которых хочу выполнить определенные действия при определенных размерах экрана. Не могу понять почему не выполняется условия скрипта $(window).width()?
Вот так работает:

$(window).resize(function() {
  console.log("resize");
  $('.main-product .product-frame').each(function() {
    var $this = $(this);
    var height = $this.find('.product-section h3').height();
    if (height > 21) {
      if (!$this.find('.variations_form').length) {
        console.log("simple");
        if ($(window).width() >= 992 && $(window).width() < 1200) {
          console.log("simple price");
        }
      }
    }
  });
});

<div class="main-product">
  <div class="product-frame">
    <div class="product-section">
      <h3>Товар 1</h3>
    </div>
  </div>
  <div class="product-frame">
    <div class="product-section">
      <h3>Товар 2</h3>
    </div>
  </div>
</div>

А когда добавляю проверку еще одного медиазапроса, то уже нет..

$(window).resize(function() {
  console.log("resize");
  $('.main-product .product-frame').each(function() {
    var $this = $(this);
    var height = $this.find('.product-section h3').height();
    if (height > 21) {
      if (!$this.find('.variations_form').length) {
        console.log("simple");
        if ($(window).width() >= 992 && $(window).width() < 1200) {
          console.log("simple price");
        }
        if ($(window).width() >= 768 && $(window).width() <= 991) {
          console.log("simple price");
        }
      }
    }
  });
});

Comments

[Денис Инешин]

А вы уверены что не работает? У вас в обоих проверках одинаковый console.log

[ligisayan]

Денис Инешин не в этом дело - у меня "resize" почему-то выводит аж 6 раз на одном разрешении

Answer 1

[Дмитрий Ковальский]

Вот вы height сохранили во временную переменную, а width постоянно пересчитываете, в чем логика? А по вопросу - в чем проблема? надпись "simple price" не появляется ни разу или что?
P.S. у вас точка 991 выпала из проверок.

Comments

[ligisayan]

Дмитрий Ковальский про width не знаю - а как можно не пересчитывая? "simple price" появляется, причем не единожды - вот в чем проблема.. если в условиях указываю более сложный функционал - проверка и по первому, и по второму условию бывает срабатывает на одном разрешении - никак не могу в толк взять логику выполнения..

[Дмитрий Ковальский]

ligisayan: var winWidth = $(window).width(); в отладке поставьте точку останова и смотрите чему она равна.

Answer 2

[Евгений]

может все-таки так?

$(window).resize(function() {
  console.log("resize");
  $('.main-product .product-frame').each(function() {
    var $this = $(this);
    var height = $this.find('.product-section h3').height();
    if (height > 21) {
      if (!$this.find('.variations_form').length) {
		 var width = $(window).width();
        console.log("simple");
        if (width >= 992 && width < 1200) {
          console.log("simple price");
        }
        if (width >= 768 && width <= 991) {
          console.log("simple price");
        }
      }
    }
  });
});

Comments

[ligisayan]

Евгений неа, "resize" выводит аж 6 раз на одном разрешении почему-то..

[Евгений]

ligisayan: видимо потому-что при ресайзе браузера происходит несколько событий ресайза

[ligisayan]

Евгений так я это в сервисе просматриваю - там тоже самое?

[Евгений]

ligisayan: каким образом ресайзите окно?

[ligisayan]

Евгений в сервисе cybercrab.com/screencheck/ выбираю разрешение девайса и просматриваю консоль

[Евгений]

ligisayan: все правильно, размер окна меняется плавно, поэтому срабатывают лишние события

[ligisayan]

Евгений т.е. сервис не показатель и можно отдебажить только на конкретных моб девайсах в данном случае?

[Евгений]

ligisayan: для firefox есть дополнение смены размера окна
так а сам скрипт то работает?

[ligisayan]

Евгений скрипт-то работает, но не выполняются или перевыполняются условия if на десктопе насколько могу судить, а планшета под рукой нету, чтобы убедиться в правильности показаний сервиса