Question

我目前拥有以下代码，该代码成功地将数组中的随机图像设置为.wrapper的背景。我想要另一个与每个特定图像永久配对的变量（字符串），以便在随机选择图像时，也会传入其特定字符串。因此，如果随机选择foo.jpg，则变量{{ 1}}设置为'foo'，但如果随机选择x，则变量bar.jpg设置为'bar'。

有关如何实现这一目标的任何想法？可能有一个JSON对象？

我的代码：

让我知道你可能有的任何问题。

由于

Answer 1

您可以使数组成为一个对象数组，而数组中的每个对象都包含url和tag。您随机选择其中一个对象，然后可以分别访问网址和标记：

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

或者，如果标记始终只是图像名称的基础，因此您可以将其从网址中解析出来，您可以这样做：

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]);

将字符串与图像关联

2 个答案: