Bootstrap 4 - 如何在调整大小时检测宽度变化

Question

我使用 Bootstrap 4，所以我在页面上添加了以下 HTML 代码

HTML

<div id="device-size-detector">
    <div id="xs" class="d-block d-sm-none"></div>
    <div id="sm" class="d-none d-sm-block d-md-none"></div>
    <div id="md" class="d-none d-md-block d-lg-none"></div>
    <div id="lg" class="d-none d-lg-block d-xl-none"></div>
    <div id="xl" class="d-none d-xl-block"></div>
</div>

JS

$(document).ready(function() {

"use strict"

function getBootstrapDeviceSize() {
    return $('#device-size-detector').find('div:visible').first().attr('id');
}

function checkMenu(){
    var screen = getBootstrapDeviceSize();

    $(window).on('resize', function() {
        screen = getBootstrapDeviceSize();
    });

    if(screen == "lg" ||  screen == "xl") {
        console.log(1); 
    } else {
        console.log(0);
    }       
}

checkMenu();

});

但是我的脚本只检测到屏幕尺寸的第一个值，并没有检测到调整大小时宽度的任何变化。我想我没有正确使用 $(window).on('resize', function() {...}，但我不明白如何修复它并让它工作？

Answer 1

将您的 window.resize 代码移到 checkMenu 函数之外，然后像下面这样调用该函数。

$(window).on('resize', checkMenu);

$(document).ready(function() {

"use strict"

function getBootstrapDeviceSize() {
    return $('#device-size-detector').find('div:visible').first().attr('id');
}

function checkMenu(){
    var screen = getBootstrapDeviceSize();    

    if(screen == "lg" ||  screen == "xl") {
        console.log(1); 
    } else {
        console.log(0);
    }       
}
checkMenu();
$(window).on('resize', checkMenu);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="device-size-detector">
    <div id="xs" class="d-block d-sm-none"></div>
    <div id="sm" class="d-none d-sm-block d-md-none"></div>
    <div id="md" class="d-none d-md-block d-lg-none"></div>
    <div id="lg" class="d-none d-lg-block d-xl-none"></div>
    <div id="xl" class="d-none d-xl-block"></div>
</div>

Bootstrap 4 - 如何在调整大小时检测宽度变化

Bootstrap 4 - how to detect changes of width on resize

jquery

twitter-bootstrap-4