jQuery - 滑块不起作用

jQuery - Slider not working

本文关键字：不起作用 jQuery      更新时间：2023-09-26

试图让一个简单的滑块工作...什么都没发生。我在JSFiddle（jquery 1.7.2，jQueryUI 1.8.1）中执行以下代码，并且可以工作。然而。。。在网页中..它没有。它是一个简单的没有手柄的滑块。

我进入控制台，没有（错误）消息...

帮助？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    <title>Sin título 1</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
    <script type="text/javascript">
    $( ".slider" ).slider({
           animate: true,
               range: "min",
               value: 50,
               min: 0,
               max: 100,
               step: 1,
               slide: function( event, ui ) {
                   $("#slider-result").html( ui.value );
               }
               });</script>
<style type="text/css">
<!--
body{
background: #CECECE !important;
padding:10px;
}
/*the slider background*/
.slider {
width:230px;
height:10px;
background: #737373;
position:relative;
margin:0;
padding:0 10px;
}
/*Style for the slider button*/
.ui-slider-handle {
width:16px;
height:16px;
position:absolute;
top:-3px;
margin-left:-12px;
z-index:200;
background:#404040;
    outline:none;
}
/*This is the fill bar colour*/
.ui-widget-header {
background:#ABABAB;
height:8px;
left:1px;
top:1px;
position:absolute;
}
​
-->
</style>
</head>
<body>
<div class="slider"></div>
<div id="slider-result">50</div>
</body>
</html>

这显然是一个工作小提琴。 http://jsfiddle.net/D45mp/

当然，在

</body></html>之前将脚本添加到文档末尾，如下所示

<html>
<body>
 // Divs spans and other stuff
    <script type="text/javascript">
            $(".slider").slider({
                animate: true,
                range: "min",
                value: 50,
                min: 0,
                max: 100,
                step: 1,
                slide: function (event, ui) {
                    $("#slider-result").html(ui.value);
                }
            });</script>
</body>
</html>

或

将其写入document.ready()脚本块中

相关文章：