0

スライダーの値に基づいて、スライダー div 内の要素の背景画像を変更したいと考えています。画像はEclipseのリソースフォルダーにあります...

という名前の CSS クラスがcharacterあり、そのクラスにはbackground-image、スライダーの値が変更されたときに変更したいルールがあります。

現在、スライダーをスライドすると、すべてのcharacter要素の背景画像が変わります。これは私が望む動作ではありません。characterラッピング スライダーが変更された場合にのみ、各要素の背景画像が変更されるようにします。

これは私がこれまでに持っているコードです:

<script>
    $(function() {
        $( ".<%=i%>" ).slider({
            disabled:false,
            animate:"slow",
            range: "min",
            value:6,
            min: 0,
            max: 10,
            step: 1,
            slide: function( event, ui ) {
                $( "#<%=i%>" ).val(  ui.value );
                $( "#hidden<%=i%>" ).val( ui.value );
            }
        });
        $( "#<%=i%>" ).val(  $( ".<%=i%>" ).slider( "value" ) );
        $( "#hidden<%=i%>" ).val(  $( ".<%=i%>" ).slider( "value" ) );
    });
</script>
<script>
    if($( "#hidden<%=i%>" ).val( ui.value )==6)
    {       
        $('.character', this).css("background-image", "url(../images/characters/1.png)");
    }
</script>

誰かが私が間違っていることを見ていますか?

4

1 に答える 1

0

問題は、背景を変更するコードが間違った場所にあり、構文が正しくないことです。

要素に関連付けられたイベントにトリガーが必要です。現在、スクリプトでは、背景画像を変更しようとしているときにドキュメントを見ています。したがってthis、コンテキストはドキュメントであり、すべてのcharacter要素が選択されます。

代わりにこれを行った場合：

$(".<%=i%>").slider({
    disabled: false,
    animate: "slow",
    range: "min",
    value: 6,
    min: 0,
    max: 10,
    step: 1,
    slide: function (event, ui) {
        $("#<%=i%>").val(ui.value);
        $("#hidden<%=i%>").val(ui.value);
    },
    change: function(event, ui){
        if(ui.value == 6){
            $('.character', this).css("background-image", "url(../images/characters/1.png)");
        }else{
            $('.character', this).css("background-image", "{some other/default image}");
        }
    }
});

次に、thisコンテキストは実際にはスライダーの div です。

これは、画像の代わりに背景色を変更した例です

于 2013-03-05T21:47:36.810 に答える