Не удается получить переменные для обновления с новыми значениями условно - PullRequest
Новая
       20

Не удается получить переменные для обновления с новыми значениями условно

0 голосов
/ 06 апреля 2020

Я думал, что это будет просто, но я что-то упустил. У меня есть массив изображений, содержащихся в переменной, которая работает нормально, но я хочу, чтобы он изменил значение этого массива условно в определенных точках останова области просмотра. консоль), но изображения не обновляются. Вот оригинальный код: 

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, которая удивительно работала как очарование ссылка здесь скрипка
Любая помощь приветствуется.

1 Ответ

0 голосов
/ 06 апреля 2020

Хорошо, ребята, это очень забавно, но я наткнулся на ответ, работая над минималистической версией на js скрипке.

оказывается, что условие было помещено не в то место, когда вы Примите во внимание иерархию кода.

это условно, поэтому оно должно следовать сразу после исходного объявления. так что после того, как он установлен, все остальные логики c могут быть добавлены к нему. 

// 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)

Таким образом, массив обновляется условно, а затем будут добавлены все логики c ниже. формально, он просто создавался как «код сам по себе, без обязательной логики c добавлен».

Также, если у вас есть лучшие объяснения или способ, которым я мог бы сделать эту простую функцию, которая будет работать для всех дела (утром, днем ​​и вечером), чтобы сохранить код dry. Я буду очень признателен, я не считаю это полностью ответом, я все еще хочу, чтобы вы внесли свой вклад.

...