Повторная загрузка страницы Javascript или JQuery, почему?

Question

Почему Javascript jQuery нуждается в перезагрузке страницы, прежде чем применять определенные эффекты?

CSS является обновление в режиме реального времени

Пример:

Это работает в режиме реального времени

@media all and (max-width:767px) { 
.nav-menu { 
margin:0px!important; 
} 
} 

Это нуждается в перезагрузке страницы, чтобы увидеть эффект, не обновляют в окне изменения размера в реальном времени

if ($(window).width() > 980) { 
do something 
}; 

Почему?

Answer 1

Потому что это последний JavaScript. В настоящее время это процедура, которая запускается только один раз, когда анализируется тег скрипта. Вы можете обернуть его в функцию и запустить его несколько раз. Например, при событии изменения размера окна. Первый - это CSS и браузеры, постоянно обновляющие страницу в соответствии с правилами CSS.

window.addEventListener("resize", function(){ 
    if ($(window).width() > 980) { 
     do something 
    }; 
}, false); 

Или в JQuery:

$(window).on("resize", function(){ 
    if ($(window).width() > 980) { 
     do something 
    }; 
}); 

Теперь это будет срабатывать каждый раз при изменении размера окна.

Answer 2

Это связано с тем, что объект jQuery/Javascript выполняется при загрузке, а не при изменении размера окна. CSS теоретически также выполняется при загрузке и просто знает, что отображать когда.

Если вы хотите запустить JS/JQuery при изменении размеров окна, вы должны добавить что-то вроде этого:

window.onresize = resize; 

function resize() 
{ 
    if ($(window).width() > 980) { 
    //do something 
    }; 
} 

выше фрагмент кода будет выполняться каждый раз, когда вы изменить размер окна и, следовательно, проверить каждый раз, когда он работает, если окно шире, чем 980.

Read more about .onresize

Answer 3

Это будет работать, когда resize событие вызывается

$(window).resize(function() { 
    if ($(window).width() > 980) { 
     ... 
     ..... 
     .... 
    } 
}); 

Это будет работать

исй - resize() функция JQuery

Answer 4

Вы должны вызвать событие, чтобы сделать яваскрипт проверки этого состояния без загрузки страницы

window.onresize = function(event) { 
    // add your if condition here 
}; 

для jQuery просто используйте нижеследующее

$(window).resize(function() { 
    // add you if condition here 
}); 

Answer 5

$(window).width() 

При вызове функции, как это дает возвращаемое значение, когда оно выполняется. Если вы хотите присвоить значение при изменении размера, нажмите клик и т. Д., Вы должны добавить прослушиватель событий.

$(window).on('resize', function() { 

    console.log($(window).width()) 

});