基于jqueryui滑块更改图像

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

我有一个名为

character

的CSS类，在该类中我有一个

背景图像

规则，当滑块值更改时，我希望更改该规则

当前，当我滑动滑块时，所有

字符

元素背景图像都会改变。这不是我想要的行为。我希望每个

字符

元素的背景图像仅在其包装滑块更改时更改

这是我目前掌握的代码：

<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>

$（函数（）{
$（“）。滑块({
残疾人士:错,，
动画：“慢”，
射程：“分钟”，
价值：6，
分:0,，
最高：10，
步骤：1，
幻灯片：功能（事件、用户界面）{
$（“#”）val（ui.value）；
$（“#隐藏”）.val（ui.value）；
}
});
$（“#”）.val（$（“）.slider（“value”）；
$（“#隐藏”）.val（$（“）.slider（“value”）；
});
if（$（“#隐藏”）.val（ui.value）==6
{       
$（'.character'，this.css（“背景图像”，“url（../images/characters/1.png）”）；
}

---

有人知道我做错了什么吗？

问题是，更改背景的代码位于错误的位置，语法不正确

您需要将事件中的触发器绑定到元素。现在，在脚本中，当您尝试更改背景图像时，它正在查看文档。因此，

这个

作为上下文就是文档，所有的

字符

元素都将被选中

如果您这样做：

$(".<%=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}");
        }
    }
});

$（“）。滑块({
残疾人士:错,，
动画：“慢”，
射程：“分钟”，
价值：6，
分:0,，
最高：10，
步骤：1，
幻灯片：功能（事件、用户界面）{
$（“#”）val（ui.value）；
$（“#隐藏”）.val（ui.value）；
},
更改：功能（事件、用户界面）{
如果（ui.value==6）{
$（'.character'，this.css（“背景图像”，“url（../images/characters/1.png）”）；
}否则{
$（'.character'，this.css（“背景图像”，“{some other/default image}”）；
}
}
});

那么

这个

上下文实际上就是slider div

---

有什么问题吗？首先，图像没有改变，其次，如果我改变了类的图像，那么与每个滑块相关的图像都会改变。我只想改变其值改变的滑块的图像。谢谢你的回答……现在，它正在检测哪个滑块值在改变，它将进入if部分，但在我的代码中不改变颜色或图像可能的原因是什么？我只是猜测你的html，但是你的

字符
元素在DOM树中的位置是什么？它们是否包含在滑块div中？还是在他们之外？