Javascript不會正確地將類添加到HTML元素-有解無憂

在此之前，我已經撰寫了針對 HTML 元素的腳本，并根據之前的條件添加或洗掉了類，但是mobile-class無論我的視窗的顯示寬度是多少，這個當前的腳本總是添加。視窗寬度高于992px時console.log正確輸出desktop，但類沒有正確更改。如果我手動將頂部陳述句設定為等于desktop，則類會相應地更新，因此似乎我displaySizeReader沒有正確地為我的displaySize變數賦值。我的邏輯在哪里中斷？

let displaySize = '';

function changeToMobile() {
    document.querySelector('.custom-menu-class').classList.remove('desktop-class');
    document.querySelector('.custom-menu-class').classList.add('mobile-class');
}

function changeToDesktop() {
    document.querySelector('.custom-menu-class').classList.remove('mobile-class');
    document.querySelector('.custom-menu-class').classList.add('desktop-class');
}

function displaySizeReader() {
    if (screen.width < 992) {
        let displaySize = 'mobile';
        console.log(displaySize);
    }
    else {
        let displaySize = 'desktop';
        console.log(displaySize);
    }

    function displayChanger() {
        if(displaySize == "mobile") {
            changeToMobile();
        } else if(displaySize == "desktop") {
            changeToDesktop();
        } else {
            changeToMobile();
        }
    }
    displayChanger();
}

displaySizeReader();

uj5u.com熱心網友回復：

您let在 if/else 陳述句前面有displaySize，因此定義了一個新變數，而不是使用您在第一行中宣告的變數。

uj5u.com熱心網友回復：

除非您使用不同的顯示幕，否則螢屏物件不會改變。如果您嘗試將這些類更改為回應型別的場景，以下內容應該對您有所幫助。

進行此更改：

function displaySizeReader() {
    if (window.innerWidth < 992) {
        displaySize = 'mobile';
        console.log(displaySize);
    }
    else {
        displaySize = 'desktop';
        console.log(displaySize);
    }

    function displayChanger() {
        if(displaySize == "mobile") {
            changeToMobile();
        } else if(displaySize == "desktop") {
            changeToDesktop();
        } else {
            changeToMobile();
        }
    }
    displayChanger();
}

轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/515493.html

標籤：javascripthtmlcss下拉式菜单宽度

上一篇：gcc可以為二叉樹“LowerBound”演算法發出像clang一樣高效的代碼嗎？

下一篇：如何一次更改多個正方形顏色？