Вместо того, чтобы писать код дважды, запишите его один раз в обработчик событий window.resize
, а затем инициируйте событие resize
для элемента window
:
$(window).resize(function() {
if (pageWidth() >= 480) {
$(".siteSearchDropdown").css("display", "none");
$(".siteSearchSelect").css("display", "block");
}
if (pageWidth() < 480) {
$(".siteSearchDropdown").css("display", "block");
$(".siteSearchSelect").css("display", "none");
}
}).trigger('resize');
Кроме того, так как этот код будетзапускать много раз, когда кто-то изменяет размер своего браузера, вы должны оптимизировать код, кэшируя селекторы:
var $siteSearchDrioopdown = $(".siteSearchDropdown"),
$siteSearchSelect = $(".siteSearchSelect");
$(window).resize(function() {
if (pageWidth() >= 480) {
$siteSearchDrioopdown.css("display", "none");
$siteSearchSelect.css("display", "block");
}
if (pageWidth() < 480) {
$siteSearchDrioopdown.css("display", "block");
$siteSearchSelect.css("display", "none");
}
}).trigger('resize');
Примечание: я упоминал, как код обработчика события resize
запускается много раз при изменении размера браузера.Чтобы проверить это сами, просто добавьте этот код на страницу и наблюдайте за тем, как летает консоль разработчика:
$(window).resize(function (e) {
console.log(e);
});
После повторного просмотра кода вы можете выполнить дальнейшую оптимизацию, используя оператор if/else
вместо выполнения командыpageWidth()
функция дважды:
var $siteSearchDrioopdown = $(".siteSearchDropdown"),
$siteSearchSelect = $(".siteSearchSelect");
$(window).resize(function() {
if (pageWidth() >= 480) {
$siteSearchDrioopdown.css("display", "none");
$siteSearchSelect.css("display", "block");
} else {//notice the change in structure so the `pageWidth()` function is only called once
$siteSearchDrioopdown.css("display", "block");
$siteSearchSelect.css("display", "none");
}
}).trigger('resize');