无法有条件地使用新值更新变量

Question

我以为这会很直接，但我错过了一些东西。我有一个包含在变量中的图像数组，它运行良好，但我希望它在某些视口断点处有条件地更改该数组的值。

问题是，当我这样做时，它看起来很好(控制台中没有错误(，但图像没有更新。这是原始代码：

function showBg() {
// Randomize bg
// morning
let morningArray = ['sunset-view-of-mountains-733100.jpg', 'purple-petal-flower-surrounded-by-green-plants-during-66288.jpg', 'time-lapse-photography-of-waterfalls-during-sunset-210186.jpg', 'two-cargo-ships-sailing-near-city-2144905.jpg'];
let morningBg = morningArray[Math.floor(Math.random() * morningArray.length)];
let morningPath = './src/img/hero/';
let morning = morningPath + morningBg
// afternoon
let afternoonArray = ['empty-dining-tables-and-chairs-1579739.jpg', 'brown-and-green-mountain-view-photo-842711.jpg', 'photo-of-keyboard-near-mouse-3184460.jpg', 'america-arid-bushes-california-221148.jpg'];
let afternoonBg = afternoonArray[Math.floor(Math.random() * afternoonArray.length)];
let afternoonPath = './src/img/hero/';
let afternoon = afternoonPath + afternoonBg;
// evening
let eveningArray = [ 'twisted-building-during-nighttime-1470405.jpg', 'beautiful-beauty-blue-bright-414612.jpg', 'landscape-photo-of-mountain-with-polar-lights-1434608.jpg', 'photo-of-toronto-cityscape-at-night-2478248.jpg'];
let eveningBg = eveningArray[Math.floor(Math.random() * eveningArray.length)];
let eveningPath = './src/img/hero/';
let evening = eveningPath + eveningBg;
console.log('two', eveningArray)
if (window.matchMedia("(max-width:1024px)").matches) {
eveningArray = ['Talon.png'];
console.log(eveningArray)
}
showBg()
}

我还在matchMedia条件中使用了这种格式：

function tabQuery(x) {
if (x.matches) {
const tabArray = ['Talon.png']
eveningArray = tabArray;
console.log(eveningArray)
}
}
const x = window.matchMedia('(max-width:1024px)');
tabQuery(x)
x.addListener(tabQuery);
console.log(x)

还是没用。变量仍在使用原始数组最后，我尝试在函数外实例化变量，并在函数中更新它。我得到了同样的结果，matchMedia阵列不工作

let eveningArray;
// and
eveningArray = [ 'twisted-building-during-nighttime-1470405.jpg', 'beautiful-beauty-blue-bright-414612.jpg', 'landscape-photo-of-mountain-with-polar-lights-1434608.jpg', 'photo-of-toronto-cityscape-at-night-2478248.jpg'];

我做错了什么？我该如何解决这个问题，我拥有所有图像的中小型，这就是为什么我要尝试使用matchMedia功能。

我在js fiddle上做了一个非常简约的版本，令人惊讶的是它的魅力链接这里小提琴
任何帮助都将不胜感激。

Answer 1

好吧，伙计们，这很有趣，但我在js fiddle上开发极简主义版本时偶然发现了答案。

事实证明，当考虑代码层次结构时，条件被放错了位置。

它是有条件的，因此它应该紧跟在原始声明之后。这样在它被设置之后，所有其他逻辑都可以被添加到它

// evening
let eveningArray = [ 'twisted-building-during-nighttime-1470405.jpg', 'beautiful-beauty-blue-bright-414612.jpg', 'landscape-photo-of-mountain-with-polar-lights-1434608.jpg', 'photo-of-toronto-cityscape-at-night-2478248.jpg'];
if (window.matchMedia("(max-width:1024px)").matches) {
eveningArray = ['Talon.png'];
console.log(eveningArray)
}
let eveningBg = eveningArray[Math.floor(Math.random() * eveningArray.length)];
let eveningPath = './src/img/hero/';
let evening = eveningPath + eveningBg;
console.log('two', eveningArray)

通过这种方式，有条件地更新数组，然后将添加下面的所有逻辑。从形式上讲，它只是"自己编写代码，没有添加任何必要的逻辑"。

此外，如果你有更好的解释或方法，我可以将其作为一个简单的函数，适用于所有情况(上午、下午和晚上(，以保持代码干燥。我会非常感激的我真的不认为这是一个完整的答案，我仍然希望你的意见。