0

我有以下标记

<div id="slider"></div>
<p id="ID"></p>
<p id="COUNTRY"></p>
<p id="DESC"></p>

和我的 Jquery 脚本

var Country = ['100~USA~UsaDescr', '101~SPAIN~SpainDescr', '102~ITALY~ItalyDescr'], p=$('#ID');

$('#slider').slider({
    max: 10, 
    min: 0, 
    slide: function(event, ui){
        p.text(Country[ui.value]);
    }
});

我想在移动滑块时...

对于第一个滑块位置，使用、和更新ID控件100COUNTRYUSADESCUsaDescr

对于第二个滑块位置，使用、和更新ID控件101COUNTRYSPAINDESCSpainDescr

我知道我在这里做着可怕的事情，但是嘿！这是我的 Jquery 开始！对于任何愿意在这里提供帮助的人来说都是JSFiddle

4

1 回答 1

1

我不会在这样的串联字符串中跟踪对象的属性，例如 ID、Country_Name 和 Description，但这应该可以帮助您入门。

http://jsfiddle.net/wUhm7/1/

html

<div id="slider"></div>
<p id="ID"></p>
<p id="COUNTRY"></p>
<p id="DESC"></p>

javascript

var Country = ['100~USA~UsaDescr', '101~SPAIN~SpainDescr', '102~ITALY~ItalyDescr'];

var splitValues = Country[0].split("~");
$('#ID').html(splitValues[0]);
$('#COUNTRY').html(splitValues[1]);
$('#DESC').html(splitValues[2]);

$('#slider').slider({
max: 2, 
min: 0, 
slide: function(event, ui){
    var splitValues = Country[ui.value].split("~");
    $('#ID').html(splitValues[0]);
    $('#COUNTRY').html(splitValues[1]);
    $('#DESC').html(splitValues[2]);
}
});

此外，您需要检查是否存在数组位置，或者在示例中将滑块最大值限制为 2。否则当您将滑块移动到 3 时，Country[3] 不存在。

于 2013-10-11T14:50:09.360 回答