需要帮助使javascript/html滑块工作

Need help getting a javascript/html slider to work

本文关键字：html 工作 javascript 帮助      更新时间：2023-09-26

我正在尝试让下面的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。 我可以用来执行此操作的最简单的滑块是什么？

我看到的第一个问题是在var slider = $('slider');语句中。

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

您也可以将 http://nivo.dev7studios.com/用作滑块，这是我一直在使用的一个很好的jQuery插件。

与其使用 window.addEvent(); ，为什么不使用 

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

这使用 jQuery 的 on ready 事件，因此您可以确定它会在文档就绪时触发

。

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

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

相关文章：