更改基于jQuery UI滑块的图像

Question

我想根据滑块值更改滑块div内元素的背景图像。这些图像在日食的资源文件夹中...

我有一个名为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> 

有谁看到我做错了吗？

Answer 1

问题是你的代码改变背景是在错误的地方和语法错误。

你需要在一个事件绑定到一个元素的触发器。现在在您的脚本中，当您尝试更改背景图像时，它正在查看文档。因此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股利。

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