Связанная строка с изображением

Question

В настоящее время у меня есть код, который успешно устанавливает случайное изображение из массива как фон .wrapper. Я хотел бы иметь еще одну переменную (строку), которая постоянно сопрягается с каждым конкретным изображением, так что, когда изображение выбирается случайным образом, его конкретная строка также передается. Поэтому, если случайно выбрано foo.jpg, переменная x установлена ​​в 'foo ', но если bar.jpg случайным образом выбран, переменная x установлена ​​в' bar '.

Любые идеи, как это можно достичь? Возможно, с объектом JSON?

мой код:

var images = ["foo.jpg", "bar.jpg", "baz.jpg", "qux.jpg"]; 
function getImage() { 
     return images[Math.floor(Math.random() * images.length)]; 
} 
$('.wrapper').css({ 
    'background' : 'url(' + getImage() + ') no-repeat center center fixed' 
}); 

Позвольте мне знать, какие-либо вопросы, вы можете иметь.

Thanks

Answer 1

Вы можете сделать массив массив объектов, а не где каждый объект в массиве содержит как URL и тег. Вы случайным образом выбрать один из объектов, а затем может отдельно открыть как URL и тег:

var images = [ 
    {url: "foo.jpg", tag: "foo"}, 
    {url: "bar.jpg", tag: "bar"}, 
    {url; "baz.jpg", tag: "baz"}, 
    {url: "qux.jpg", tag: "qux"} 
]; 

function getNum() { 
     return Math.floor(Math.random() * images.length); 
} 
var item = images[getNum()]; 
$('.wrapper').css({ 
    'background' : 'url(' + item.url + ') no-repeat center center fixed' 
}).html(item.tag); 

Или, если тег всегда только основа имени изображения, так что вы можете разобрать его из URL, вы можете сделать это:

var images = ["foo.jpg", "bar.jpg", "baz.jpg", "qux.jpg"]; 
function getNum() { 
     return Math.floor(Math.random() * images.length); 
} 
var num = getNum(); 
$('.wrapper').css({ 
    'background' : 'url(' + images[num] + ') no-repeat center center fixed' 
}).html(images[num].replace(/\.jpg$/, "")); 

Answer 2

Вы можете попробовать использовать параллельные массивы.

var images = ["foo.jpg", "bar.jpg", "baz.jpg", "qux.jpg"]; 
var x  = ["foo", "bar", "baz", "qux"]; 
function getNum() { 
     return Math.floor(Math.random() * images.length); 
} 
var num = getNum(); 
$('.wrapper').css({ 
    'background' : 'url(' + images[num] + ') no-repeat center center fixed' 
}).html(x[num]);