JavaScript中的Window.matchMedia不起作用

我有一个HTML，CSS和JavaScript文件。HTML包含三个引号，每两秒钟洗牌一次。我编写了JavaScript代码，仅当屏幕宽度最大为600px时才显示这些引号。问题是，报价继续在每个屏幕宽度上显示。我曾尝试在CSS中使用媒体查询，但没有效果。可能是什么问题？请参阅下面的代码

HTML代码：

<div class="preNavBar">
        <div class="quoteWrapper">
            <span class="quote">The roots of education are bitter, but the fruit is sweet. &nbsp;</span>
            <span class="quoteAuthor">&#8212; Aristotle</span>
        </div>
        <div class="quoteWrapper">
            <span class="quote">To teach is to learn twice. &nbsp;</span>
            <span class="quoteAuthor">&#8212; Unknown</span>
        </div>
        <div class="quoteWrapper">
            <span class="quote">A person who won't read has no advantage over one who can't read. &nbsp;</span>
            <span class="quoteAuthor">&#8212; Mark Twain</span>
        </div>
    </div>

JavaScript代码：

<script>
        let x = window.matchMedia("(max-width: 600px)");
        if (x.matches) {
            showQuote();
            function showQuote() {
                let slides = document.getElementsByClassName("quoteWrapper");
                let i;
                for (i = 0; i < slides.length; i++) {
                    slides[i].style.display = "none";
                }

                let min = 0;
                let max = slides.length - 1;
                let randNum = Math.floor(Math.random() * (max - min + 1)) + min;

                slides[randNum].style.display = "block";

                setTimeout(showQuote, 2000); // change every 2 seconds
            }
        }
    </script>

设x=window.matchMedia（（最大宽度：600px））；
如果（x.matches）{
showQuote（）；
函数showQuote（）{
让slides=document.getElementsByClassName（“quoteWrapper”）；
让我；
对于（i=0；i

让我们看一下第一行：

让x=window.matchMedia（（最大宽度：800px））；

调用

window.matchMedia

并将返回值存储在

x

中

这里重要的一点是，如果在声明屏幕后调整屏幕大小，

x

不会改变

如果你想，你需要一个

---

此外，这里可能存在的一个陷阱是，根据

标记在文档中的位置，您可能希望将所有代码包装到文档中，以确保在文档完全加载后触发。

这是因为您在开始时设置变量，而在调整大小时从不更改它

let超时；
函数testMatch（）{
设x=window.matchMedia（（最大宽度：800px））；
如果（x.matches）{
函数showQuote（）{
让slides=document.getElementsByClassName（“quoteWrapper”）；
for（设i=0；i600px
timeout=setTimeout（showQuote，2000）；//每2秒更改一次
}
showQuote（）；
}else if（超时）{
clearTimeout（超时）；
}
}
testMatch（）；
addEventListener（“调整大小”，testMatch）；

此外，通过使用一个id来表示哪个报价没有被隐藏，这可以更有效地完成

（函数（）{
const slides=document.getElementsByClassName（“quoteWrapper”）；
让超时；
函数testMatch（）{
设x=window.matchMedia（（最大宽度：800px））；
如果（x.matches）{
函数showQuote（）{
//最小值是0，所以如果你做幻灯片，它是无用的。长度-1，
//您将无法访问最后一个索引
让randNum=Math.floor（Math.random（）*slides.length）；
const prev=document.getElementById（“当前报价”）；
如果（先前）先前删除属性（“id”）；
幻灯片[randNum].setAttribute（“id”，“当前报价”）；
timeout=setTimeout（showQuote，2000）；//每2秒更改一次
}
showQuote（）；
}else if（超时）{
clearTimeout（超时）；
}
}
testMatch（）；
addEventListener（“调整大小”，testMatch）；
})();

.quoteWrapper{
显示：无；
}
#当前报价{
显示：块；
}

第二个js代码块出现了一些错误，比如

#current quote

=>

current quote

，并且没有使用前面提到的其他评论员所说的IIFE，我已经测试了新编辑的代码，现在可以正常工作了。

<script>
        let x = window.matchMedia("(max-width: 600px)");
        if (x.matches) {
            showQuote();
            function showQuote() {
                let slides = document.getElementsByClassName("quoteWrapper");
                let i;
                for (i = 0; i < slides.length; i++) {
                    slides[i].style.display = "none";
                }

                let min = 0;
                let max = slides.length - 1;
                let randNum = Math.floor(Math.random() * (max - min + 1)) + min;

                slides[randNum].style.display = "block";

                setTimeout(showQuote, 2000); // change every 2 seconds
            }
        }
    </script>