jQuery: функция запуска, когда ширина окна соответствует любому значению в массиве

Я работаю над отзывчивым сайтом и имею несколько конкретных функций, которые мне нужно активировать в определенных точках при изменении размера окна: когда окно достигает определенной ширины «мобильного устройства», когда оно достигает определенной ширины «рабочего стола» и когда оно достигает любой ширины в указанном массиве чисел (мои контрольные точки CSS).

Вот урезанная скрипка, показывающая, где я нахожусь (все добавленные элементы абзаца являются заполнителями для того, где будут работать мои функции): http://jsfiddle.net/ygwug/

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

var breakpoints = [320, 480, 550, 650, 720, 790, 1000, 1190];
    window_w = $wind.width();

var breakpointHit = function() {
    $('body').append("<p>Breakpoint was hit!</p>");
}

if ( $.inArray( window_w, breakpoints ) > -1 ) {
    breakpointHit();
}

Насколько я понимаю, $.inArray должен возвращать -1, если значение не существует в массиве, и индекс значения, если оно существует, поэтому я использовал «> -1», чтобы определить, существует ли значение в массиве. массив. Но поскольку я не вижу никаких синтаксических ошибок в Dev Tools, где-то в моей логике должна быть ошибка.

Если бы кто-нибудь мог помочь указать мне правильное направление, я был бы очень признателен. Спасибо!


person R.J.    schedule 07.04.2013    source источник
comment
Попробовал ваш jsfiddle как есть - кажется, работает нормально. Точка останова достигнута. Однако получить окно с точной шириной для одного из ваших значений в массиве сложно :-)   -  person Fergus    schedule 07.04.2013
comment
Тот же вывод, что и у Фергуса. Я, однако, не мог получить окно именно такой ширины.   -  person dgo    schedule 07.04.2013
comment
О, извините, если это было неясно. Я хочу, чтобы функция срабатывала при прохождении точки останова, поэтому, когда вы несколько раз изменяете размер окна, сужая и расширяя его, вы должны увидеть, что сработало несколько точек останова! сообщения рассредоточены между десктопными/мобильными сообщениями. Прямо сейчас все, что я вижу, это либо Окно теперь подвижно. или Окно теперь является рабочим столом.   -  person R.J.    schedule 07.04.2013
comment
@Fergus @user1167442 Это потому, что выполнение точного теста ширины на самом деле не то, что вы хотите выполнить с адаптивным дизайном. Адаптивные селекторы CSS обычно имеют значение max-width: px, означающее, что max-width страницы равно значению в пикселях или меньше (например, <).   -  person Brandon Buck    schedule 07.04.2013
comment
@izuriel Да, точно. Я хочу, чтобы эта функция срабатывала, когда метка пройдена, а не обязательно точно остановлена. Функционал аналогичен медиа-запросам CSS.   -  person R.J.    schedule 07.04.2013
comment
Проверьте мой ответ, JSFiddle должен иметь то, что вам нужно.   -  person Brandon Buck    schedule 07.04.2013


Ответы (1)


Проверьте эту модификацию исходного jFiddle: http://jsfiddle.net/hKRrm/1/

Что я изменил:

  • Тест точки останова перенесен в окно изменения размера.
  • позволяет breakpointHit принять точку останова, которая была достигнута
  • измените тест точки останова так, чтобы он был window_w < breakpoint наиболее вероятным (== ни к чему вас не приведет)
  • Добавьте в кеш текущую точку останова, чтобы она не срабатывала более одного раза.
  • переместил вызов mobileCheck в функцию breakpointHit, где он должен быть. Под этим я подразумеваю, что вы хотите проверить, находитесь ли вы на мобильном устройстве, только если сработала точка останова, а не все время.

Это может или не может ответить на ваш вопрос, но это то, что я интерпретировал ваш вопрос как вопрос.

person Brandon Buck    schedule 07.04.2013
comment
Ах, это потрясающе! Спасибо за работу, я обязательно многому научусь копаться в вашем коде, это даже лучшая функциональность, чем я планировал изначально. - person R.J.; 07.04.2013
comment
@Р.Дж. Рад это слышать. Вы прошли большую часть пути, я просто немного изменил его, чтобы вы не были очень далеки от правильного курса. - person Brandon Buck; 07.04.2013