0

jQuery UI Sliderウィジェットについて質問です。私がやろうとしていることは、すべてのアップカウント値で、スライダーが div に画像を追加することです:

$("#divOne").slider({
        range: "min",
        min: 1,
        max: 10,

       slide: function (event, ui) {
           console.log(ui.value);

           if(ui.value == 1) {
              $('#divOne').append('<img class="linkimg" src="img/link/zwei.png">');
           }
           if(ui.value == 2) {
              $('#divOne').append('<img class="linkimg" src="img/link/drei.png">');
           }
           if(ui.value == 3) {
              $('#divOne').append('<img class="linkimg" src="img/link/eins.png">');
                     }
       },

           change: function (event, ui) {
              //alert('Stopped at ' + ui.value);
           }  
});

これまでのところうまくいきます。

問題は、ダウンカウントしている場合は要素を削除したいのですが、1つの数値を超えるともちろん再び追加されるため、ifステートメントの値を比較すると間違っていると思います。

あなたの誰かがヒントを持っていますか？乾杯

編集：やりたいことを示す画像を作成しましたクリック

4

2 に答える 2

1

すべての画像をhtmlに配置すると仮定します

/* cache collection of images*/
var $images= $("#divOne img")
$("#divOne").slider({            

       slide:function(e,ui){
            if( ui.value !== $images.filter(':visible').length){
                $images.hide().slice( 0, ui.value).show();
            }
       }

});

これが行うことは、トラック番号の表示とスライダーの値です....それらが一致しない場合、すべてを非表示にして、スライダーに一致するものを表示します。

数が多い場合...これをアップグレードして、スライダーの方向を追跡し、影響を受ける画像のみを変更してパフォーマンスを向上させる必要があります

于 2013-11-03T16:37:20.823 に答える
1

最初に、値に一致するようにイメージ名を変更します。例: 1.png, 2.png. 次に、次のことができます。

var i, maxVal = ui.value, html='';
for (i = 1; i <= maxVal; i += 1) {
  html += '<img src="img/' + i + '.png';
}
$('#divOne').html(html);

編集:しかし、一般的には、コンテナ内にすべての画像を配置してから、値に一致するクラスを適切な状態にマップするスタイルシートを作成することをお勧めします。例えば：

<div class="score[X]"> <!-- where `[X]` will be the actual value of the ui.value -->
   <img class="val1" src="1.png">
   <img class="val2" src="2.png">
   <img class="val3" src="3.png">
</div>

CSSで：

.score1 .val2 { display: none; }
.score1 .val3 { display: none; }
....

または上記の他のバリエーション。

編集：

CSS のアプローチが少し異なるフィドルの例: http://jsfiddle.net/gwQAW/

EDIT2：

HTML5 スライダー付きのバージョン: http://jsfiddle.net/gwQAW/2/ (申し訳ありませんが、現在 jQuery UI の時間がありません)

于 2013-11-03T15:58:26.217 に答える