0

.wrapper現在、配列からランダムな画像を背景として正常に設定する以下のコードがあります。画像がランダムに選択されたときに、その特定の文字列も渡されるように、特定の各画像と永続的にペアになっている別の変数 (文字列) が必要です。foo.jpgランダムに選択された場合、変数xは「foo」に設定されます。がbar.jpgランダムに選択された場合、変数xは「バー」に設定されます。

これを達成する方法はありますか？おそらく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とタグの両方が含まれます。オブジェクトの1つをランダムに選択すると、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 に答える