Javascript Slider没有显示和图表提示

I know im doing something wrong since i dont know javascript yet. My slider is not showing on the website but everything else yes. Here is my code:

我知道我做错了,因为我还不知道javascript。我的滑块没有在网站上显示,但其他一切都是。这是我的代码:

Html

<head>
    <meta charset="utf-8" />
    <title>Hellequin - Class - Cra</title>
    <link href="../../css.css" rel="stylesheet" type="text/css" media="screen" />
    <script src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script src="../../code.js"></script>
</head>

<body>
    <table>
         <tr>
                <td>
                    <div class="container">
                        <div id="slider"></div>
                    </div>
                    <br />
                    <table border="1" width="100" height="50">
                        <tr>
                            <td>
                                <input type="text" id="ElephantInfo" />
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <div id="Elephant">Please slide !</div>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
</body>

Css

.container {width : 70%; margin: 0px auto;}
#elephant{
    margin-bottom:5px;
    border : 1px solid black;
    width : 50px;
    height : 20px;
    line-height : 20px;
    position : relative;
    text-align : center;
}

Javascript

$(document).ready(function () {
    $(function () {
        var elephantArr = new Array("",
            "200",
            "199",
            "198",
            "197",
            "196",
            "195",
            "194",
            "193",
            "192",
            "191",
            "190",
            "189");
        var initialValue = 1,
            min = 1,
            max = 200;
        $("#slider").slider({
            value: initialValue,
            min: min,
            max: max,
            step: 1,
            slide: function (event, ui) {
                $("#elephantInfo").val(ui.value);
                $("#elephant").text(elephantArr[ui.value]);
                $("#elephant").css("left", "10px");
            }
        });
        $("#elephantInfo").val(initialValue);
        $("#elephant").text(elephantArr[initialValue]);
        $("#elephant").css("left", "10px");
    });
});

And if there any tips about how to customize how the slider look like, im open to suggestion!

如果有任何关于如何自定义滑块外观的提示,我可以提出建议!

PS: Sry for the bad language..

PS:为坏语言讽刺..

1 个解决方案

#1

Jquery slider is part of the Jquery UI package. In your current code, you are loading jquery 1.8.3 multiple times.

Jquery滑块是Jquery UI包的一部分。在当前代码中,您将多次加载jquery 1.8.3。

Add these lines to include both the css and js file from the jQuery UI and don't forget to remove one jquery include.

添加这些行以包含来自jQuery UI的css和js文件,并且不要忘记删除一个jquery包含。

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>

#1