0

我目前有下面的代码，它成功地将数组中的随机图像设置为.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'
});

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

谢谢

4

2 回答 2

2

您可以将数组设为对象数组，而不是数组中的每个对象都包含 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$/, ""));
于 2012-06-06T02:45:29.130 回答
1

您可以尝试使用并行数组。

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]);
于 2012-06-06T02:41:29.440 回答