Question

此滑块如何工作？

来源给出了什么

<style>
    #demo-frame > div.demo { padding: 10px !important; }
</style>
<script>
    $(function() {
        $( "#slider" ).slider();
    });
</script>
<div class="demo">
    <div id="slider"></div>
</div><!-- End demo -->

在添加此

之前，我确实包含了jquery

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>

但它给了我

SCRIPT438：对象不支持属性或方法'slider'

错误。

这就是整个代码的样子

<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
    </head>
    <body>
        <style>
            #demo-frame > div.demo { padding: 10px !important; }
        </style>

        <div class="demo">
            <div id="slider"></div>
        </div><!-- End demo -->

        <script>
        $(function() {
            $( "#slider" ).slider();
            });
        </script>
    </body>
</html>

我错过了什么？

Answer 1

在添加此
之前，我确实包含了jquery

你确实包含了jQuery ......但你使用的是jQuery ui插件方法 - .slider()而没有引用ui插件。
因此javascript不知道方法slider，

在之后添加引用：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

更新：

花了太多时间，我发现了你的问题，你错过了 JQuery ui css ：

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>

<强> JSFiddle DEMO

Answer 2

您应该使用jQuery UI作为滑块。

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"/>

Answer 3

由于它是一个 jQuery UI Slider，你缺少 jQuery UI ，它需要在jQuery之后包含。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js" type="text/javascript"></script>

jQuery滑块未知

3 个答案: