Как перебрать массив?

Question

[Mestniydevil]

Как перебрать массив по клику? А если дошел до конца массива начинать за нова.

var backgraunig =[
        [ '_bg1.jpg'],
        [ '_bg2.jpg'],
        [ '_bg3.jpg'],
        [ '_bg4.jpg'],
    ];
    for (var i = 0; i < backgraunig.length; i++) {
        console.log(backgraunig.length);
    }

И как его сохранить в Cookie ? Надо сохранить фон страницы выбранный из этого массива.

Что бы при перезагрузки он оставался если кеш браузера был не сброшен.

Comments

[DanKud]

Перебрать для чего? Должно же быть какое-то условие выборки нужного элемента из массива.

[Mestniydevil]

DanKud, Мен надо вставлять путь к картинке

document.getElementById('el').style.backgroundImage='url(/img/'+img+')';

По очередно если дошел дошел до конца то начинать заново.

По клику пользователя надо вставлять картинку из массива

[DanKud]

Mestniydevil, для чего у вас ссылки на картинки прописаны внутри массивов? Можно так:

var backgraunig =[
    '_bg1.jpg',
    '_bg2.jpg',
    '_bg3.jpg',
    '_bg4.jpg',
];

const el = document.getElementById('el');

el.style.backgroundImage = 'url("/img/' + backgraunig[0] + '")';

el.addEventListener('click', function() {
    const currentURL = this.style.backgroundImage.match(/url\("\/img\/(.*?)"\)/)[1];
    const iof = backgraunig.indexOf(currentURL);
    const i = (iof === (backgraunig.length - 1)) ? 0 : (iof + 1);
    this.style.backgroundImage = 'url("/img/' + backgraunig[i] + '")';
});

[Mestniydevil]

DanKud, Массив из базы берется. Это для примера я так написал. Что бы было понятно какой массив. А что бы не обращается к базе постоянно я храню их в массиве при загрузке страницы.

[DanKud]

Mestniydevil, если у вас массив на выходе выглядит так:

var backgraunig = [
    [ '_bg1.jpg'],
    [ '_bg2.jpg'],
    [ '_bg3.jpg'],
    [ '_bg4.jpg'],
];

то просто пересоберите его, чтобы работал код, который я написал, так будет удобнее:

var backgraunig = [
    [ '_bg1.jpg'],
    [ '_bg2.jpg'],
    [ '_bg3.jpg'],
    [ '_bg4.jpg'],
];

backgraunig = backgraunig.map(n => { return n[0] });

const el = document.getElementById('el');

el.style.backgroundImage = 'url("/img/' + backgraunig[0] + '")';

el.addEventListener('click', function() {
    const currentURL = this.style.backgroundImage.match(/url\("\/img\/(.*?)"\)/)[1];
    const iof = backgraunig.indexOf(currentURL);
    const i = (iof === (backgraunig.length - 1)) ? 0 : (iof + 1);
    this.style.backgroundImage = 'url("/img/' + backgraunig[i] + '")';
});

Answer 1

[Валентин]

Если именно для твоего примера, то так
console.log(backgraunig[i]);

Comments

[Mestniydevil]

Нее не то! Надо вот так только без jquery https://jsfiddle.net/ffbckfhn/

[Валентин]

Mestniydevil, то?

Answer 2

[UNy]

Ты слайдер пытаешься сделать? Если да то посмотри как это реализовано у других, А вообще пропиши функцию реагирующую на клик и передающую id картинки на сервер. Например нажал на next, а next у тебя картинка с id=2, передал это значение на сервер, он нашел соответствующую картинку и отдал её назад.