更改基於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