Question

我正在制作一张能够获得奥运奖牌统计数据的桌子。我有一个每个国家的旗帜精灵。我想用国家＆＃34; id＆＃34; （来自json）设置包含每个国家标志的div的背景位置。

我尝试做的手动示例：

//flag postition
var rus = $('.flag').css('background-position', '0  -51' + 'px');
//var nor = $('.flag').css('background-position', '0  -136' + 'px');
console.log(rus);
//console.log(nor);

jsfiddle：http://jsfiddle.net/tommy6s/J6Gck/

Answer 1

Javascript不知道国家的旗帜是什么样的。

为每个国家/地区准备样式：

div.flag.canada
{
    background-position: 0px -34px;
}

div.flag.united.states
{
    background-position: 0 100%;
}

并在类中附加名称，如下所示：

<div class="flag ' + data[i].name.toLowerCase() + '">...

演示：

http://jsfiddle.net/NicoO/J6Gck/2/

Answer 2

以下是使用ID

的示例

<div class="flag ' + data[i].id + '">' + data[i].name + '</div>

http://jsfiddle.net/J6Gck/3/

动态设置精灵上的背景位置

2 个答案: