javascript - 如果我将屏幕宽度更改为 2-4 倍，则代码无法在不刷新的情况下运行

Question

if ($(window).width() < 900) {
    $("#responsive_content_1").removeClass("justify-content-center d-flex");
    $("#responsive_content_1_1").addClass("center");
    $("#responsive_features").removeClass("justify-content-center d-flex");
    $(".text_features").removeClass("col-3").addClass("col mt-3 margin-text");
    $(".hide").hide();
}

if ($(window).width() > 900) {
    $("#responsive_content_1").addClass("justify-content-center d-flex");
    $("#responsive_content_1_1").removeClass("center");
    $("#responsive_features").addClass("justify-content-center d-flex");
    $(".text_features").addClass("col-3").removeClass("col mt-3 margin-text");
    $(".hide").show();
}

我在这里遇到问题，如果我用检查元素更改屏幕 2-4，代码将无法再次运行。谁能帮我？

Answer 1

您可以使用窗口resize事件：

$(window).resize(function () {
 if ($(window).width() < 900) {
       $("#responsive_content_1").removeClass("justify-content-center d-flex");
        $("#responsive_content_1_1").addClass("center");
    $("#responsive_features").removeClass("justify-content-center d-flex");
    $(".text_features").removeClass("col-3").addClass("col mt-3 margin-text");
    $(".hide").hide();


 }

 if ($(window).width() > 900) {

    $("#responsive_content_1").addClass("justify-content-center d-flex");
    $("#responsive_content_1_1").removeClass("center");
    $("#responsive_features").addClass("justify-content-center d-flex");
    $(".text_features").addClass("col-3").removeClass("col mt-3 margin-text");
    $(".hide").show();
 }
}

Answer 2

使用$(window).resize() https://api.jquery.com/resize/

$( window ).resize(function() {
   //ALL YOUR CODE AGAIN
})

我建议用你的所有代码制作一个，并在何时function何地执行该函数$(document).ready$(window).resize