0

範囲/スライダーの値に応じて、ui-slider-handle の background-image:url を変更したい (JQuery Mobile)

おおむねhttp://jsfiddle.net/phillpafford/YgJ9P/2/のようですが、私が言ったように、スライダーハンドルの背景画像が変化するのを見たいです。

$("#slider").change(function() {
    sVal = $(this).val();

    if(sVal > 21 && sVal <= 40) {
        $('#theImage').attr('src', 'http://jquerymobile.com/demos/1.0b2/docs/toolbars/glyphish-icons/21-skull.png');
    }

    if(sVal > 41 && sVal <= 60) {
        $('#theImage').attr('src', 'http://jquerymobile.com/demos/1.0b2/docs/toolbars/glyphish-icons/18-envelope.png');
    }

    if(sVal > 61 && sVal <= 80) {
        $('#theImage').attr('src', 'http://jquerymobile.com/demos/1.0b2/docs/toolbars/glyphish-icons/100-coffee.png');
    }

    if(sVal > 81 && sVal <= 100) {
        $('#theImage').attr('src', 'http://jquerymobile.com/demos/1.0b2/docs/toolbars/glyphish-icons/88-beermug.png');
    }

});​
4

1 に答える 1

1

Phill が JSFiddle で選択した要素ではなく、handle 要素を選択するだけです。

$("#slider").change(function() {
   var sVal = $(this).val(),
       $ele = $(this).next().children();

    if(sVal > 21 && sVal <= 40) {
        $ele.addClass('skull-class').removeClass('envelope-class coffee-class beermug-class');
    }

    if(sVal > 41 && sVal <= 60) {
        $ele.addClass('envelope-class').removeClass('skull-class coffee-class beermug-class');
    }

    if(sVal > 61 && sVal <= 80) {
        $ele.addClass('coffee-class').removeClass('envelope-class skull-class beermug-class');
    }

    if(sVal > 81 && sVal <= 100) {
        $ele.addClass('beermug-class').removeClass('envelope-class coffee-class skull-class');
    }

});​

ここにデモがあります：http://jsfiddle.net/jasper/YgJ9P/192/

を使用して要素にスタイルを追加するのではなく、.css()いくつかのクラスをセットアップして、JS コードと CSS コードを分離しておきます。

.ui-slider .skull-class {
    background : url(http://jquerymobile.com/demos/1.0b2/docs/toolbars/glyphish-icons/21-skull.png);
}
.ui-slider .envelope-class {
    background : url(http://jquerymobile.com/demos/1.0b2/docs/toolbars/glyphish-icons/18-envelope.png);
}
.ui-slider .coffee-class {
    background : url(http://jquerymobile.com/demos/1.0b2/docs/toolbars/glyphish-icons/100-coffee.png);
}
.ui-slider .beermug-class {
    background : url(http://jquerymobile.com/demos/1.0b2/docs/toolbars/glyphish-icons/88-beermug.png);
}​

JS を少し圧縮することもできます。

var allClasses = 'skull-class envelope-class coffee-class beermug-class';
$("#slider").change(function() {

    //get the value of the slider as well as cache the slider handle element
    var sVal = $(this).val(),
        $ele = $(this).next().children();

    //remove the icon classes from the handle
    $ele.removeClass(allClasses);

    (sVal > 21 && sVal <= 40) ? $ele.addClass('skull-class') :
        (sVal > 41 && sVal <= 60) ? $ele.addClass('envelope-class') :
            (sVal > 61 && sVal <= 80) ? $ele.addClass('coffee-class') : 
                (sVal > 81 && sVal <= 100) ? $ele.addClass('beermug-class') : ''
});​

http://jsfiddle.net/jasper/YgJ9P/195/

于 2012-07-10T15:48:21.240 に答える