Question

我试图让下面的html代码工作，无法搞清楚。我不认为domready事件被解雇了，也无法弄明白为什么。

<!DOCTYPE html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<style>
.slider {
    background: #CCC;
    height: 16px;
    width: 200px;
}

    .slider .knob {
        background: #000;
        width: 16px;
        height: 16px;
    }

</style>
    <script type="text/javascript">

window.addEvent('domready', function(){

    var slider = $('slider');

    new Slider(slider, slider.getElement('.knob'), {
        range: [0, 100],
        initialStep: 100, steps: 11, wheel: true,
        onChange: function(value){
alert(value);
        }
    });
});

    </script>
  </head>
<body>

<div id="slider" class="slider">
    <div class="knob"></div>
</div>

</body>
</html>

我只是希望在我的网页上有一个滑块，因为浏览器限制而无法使用html 5。我可以使用的最简单的滑块是什么？

Answer 1

我看到的第一个问题是var slider = $('slider');声明。

您需要将其更改为var slider = $('#slider');或var slider = $('.slider');，具体取决于您是否要通过ID或CLASS名称进行访问。

您还可以使用http://nivo.dev7studios.com/作为滑块，这是我一直在使用的优秀jQuery插件。

Answer 2

为什么不使用

，而不是使用window.addEvent();

$(function(){
    // your code here.
});

它在就绪事件中使用jQuery，因此您可以确定它将在文档就绪

上启动

正如上面的Odinn所说，你正在使用$（'slider'），这意味着jquery正在寻找一个元素。您需要指明您是要搜索ID $('#slider')还是按类$('.slider');

除此之外，我会让你的控制台保持开放状态以查找任何错误并发布。希望有所帮助。

需要帮助获得javascript / html滑块才能工作

2 个答案: