javascript - jQuery UI Slider 拒绝显示自定义句柄

Question

我正在尝试使用本教程创建一个带有自定义句柄的 jQuery Slider：

http://papermashup.com/jquery-ui-slider/

在他们的演示页面上它可以工作，但是当我做同样的事情时，它不会显示自定义句柄图像。它正确显示其他所有内容。这是我正在使用的页面（您可以看到图像存在于服务器上并且应该显示）：

http://jovansfreelance.com/stripe_pay/

这是应该显示为滑块句柄的图像：

http://jovansfreelance.com/stripe_pay/images/slider-button.png

我究竟做错了什么？

Answer 1

您忘记将代码包装在 document.ready() 调用中。您的代码现在的方式是在页面中存在元素之前尝试执行。

尝试：

$(document).ready(function(){
    $( ".slider" ).slider({
           animate: true,
               range: "min",
               value: 50,
               min: 10,
               max: 100,
               step: 10,

               //this gets a live reading of the value and prints it on the page
               slide: function( event, ui ) {
                   $( "#slider-result" ).html( ui.value );
               },

               //this updates the hidden form field so we can submit the data using a form
               change: function(event, ui) {
               $('#hidden').attr('value', ui.value);
               }
    });
});