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コントロールをで100、 でCOUNTRYコントロールを で更新します。USADESCUsaDescr

2 番目のスライダーの位置については、 でコントロールを更新し、 でIDコントロールをで101、 でCOUNTRYコントロールを で更新します。SPAINDESCSpainDescr

私はここでひどいことをしていることを知っていますが、ねえ! これが私の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 に答える