基于jquery ui滑块更改图像

时间:2013-03-05 19:23:56

标签: jquery html css

我想根据滑块值更改滑块div内元素的背景图像。图像位于eclipse的资源文件夹中......

我有一个名为character的CSS类,在该类中我有一个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>

有人看到我做错了吗?

1 个答案:

答案 0 :(得分: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上下文实际上是sllider div。

Here is an example where I changed the background color instead of an image