Question

我正在使用Jquery if else条件（$（window）.width（））它工作正常。但是当窗口宽度改变时，条件不会自动应用，而是我需要重新加载浏览器应用条件。当我调整浏览器大小时，什么将有助于获得平滑的CSS媒体查询相似的更改。

＆＃13;

jQuery(document).ready(function( $ ) {

    if ($(window).width() < 767) {
        $('p').removeClass('blue');
        $('p').addClass('green');
    }
    else {
        $('p').addClass('red');
        $('p').removeClass('blue');
    }
    

});

＆＃13;

.red {
  color: red;
}

.green {
  color: green
}

.blue {
  color: blue
}

＆＃13;

<p class="blue">Hello World</p>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

＆＃13;

Fiddle

Answer 1

尝试以下代码

jQuery(document).ready(function() {
    Responsive();
});

$(window).resize(function () {
    Responsive();
});

function Responsive(){
    if ($(window).width() < 767) {
        $('p').removeClass('blue');
        $('p').addClass('green');
    }
    else {
        $('p').addClass('red');
        $('p').removeClass('blue');
    }
}

带有（$（window）.width（）的jquery条件需要重新加载

1 个答案: