Jquery Slider在Fiddle中工作，但在浏览器中不工作，出现错误
Jquery Slider working in Fiddle but not in Browser, Gives Error
我正在开发jquery滑块，并在JsFiddle中成功实现，但在浏览器中不工作，并显示如下错误：
file:///C:/Users/kumarah/Dropbox/Scheduler/FreshStart/VERSION_3.5/skillselection/images/ui-bg_glass_75_e6e6e6_1x400.png net::ERR_FILE_NOT_FOUND
file:///C:/Users/kumarah/Dropbox/Scheduler/FreshStart/VERSION_3.5/skillselection/images/ui-icons_888888_256x240.png net::ERR_FILE_NOT_FOUND
file:///C:/Users/kumarah/Dropbox/Scheduler/FreshStart/VERSION_3.5/skillselection/images/ui-bg_flat_75_ffffff_40x100.png net::ERR_FILE_NOT_FOUND
file:///C:/Users/kumarah/Dropbox/Scheduler/FreshStart/VERSION_3.5/skillselection/images/ui-bg_highlight-soft_75_cccccc_1x100.png net::ERR_FILE_NOT_FOUND
file:///C:/Users/kumarah/Dropbox/Scheduler/FreshStart/VERSION_3.5/skillselection/images/ui-bg_glass_75_dadada_1x400.png net::ERR_FILE_NOT_FOUND
file:///C:/Users/kumarah/Dropbox/Scheduler/FreshStart/VERSION_3.5/skillselection/images/ui-bg_glass_65_ffffff_1x400.png net::ERR_FILE_NOT_FOUND
我试着在StackOverflow上寻找这个，找到了很多答案，但没有成功。甚至尝试复制图像文件夹中所有丢失的图像，但仍然显示丢失。
这是同一的工作小提琴
工作Fiddle
但不能在浏览器中工作，浏览器的代码是
.js
<script>
$(function() {
// setup master volume
$( "#master1" ).slider({
value: 50,
orientation: "horizontal",
range: "min",
animate: true
});
// setup graphic EQ
$( "#eq1 > span" ).each(function() {
// read initial values from markup and remove that
var value = parseInt( $( this ).text(), 10 );
$( this ).empty().slider({
value: value,
range: "min",
animate: true,
orientation: "vertical"
});
});
});
$(function() {
// setup master volume
$( "#master2" ).slider({
value: 30,
orientation: "horizontal",
range: "min",
animate: true
});
// setup graphic EQ
$( "#eq2 > span" ).each(function() {
// read initial values from markup and remove that
var value = parseInt( $( this ).text(), 10 );
$( this ).empty().slider({
value: value,
range: "min",
animate: true,
orientation: "vertical"
});
});
});
$(function() {
// setup master volume
$( "#master3" ).slider({
value: 20,
orientation: "horizontal",
range: "min",
animate: true
});
// setup graphic EQ
$( "#eq3 > span" ).each(function() {
// read initial values from markup and remove that
var value = parseInt( $( this ).text(), 20 );
$( this ).empty().slider({
value: value,
range: "min",
animate: true,
orientation: "vertical"
});
});
});
$(function() {
// setup master volume
$( "#master4" ).slider({
value: 90,
orientation: "horizontal",
range: "min",
animate: true
});
// setup graphic EQ
$( "#eq4 > span" ).each(function() {
// read initial values from markup and remove that
var value = parseInt( $( this ).text(), 10 );
$( this ).empty().slider({
value: value,
range: "min",
animate: true,
orientation: "vertical"
});
});
});
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Slider - Multiple sliders</title>
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script src="jquery-ui.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<link rel="stylesheet" href="jquery-ui.css">
<!-- <script src="jquery-1.10.2.js"></script> -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/7.1.0/css/bootstrap-slider.css" >
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/7.1.0/bootstrap-slider.js"></script>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
</head>
<body style="margin:10px;padding:10px">
<div class = "row">
<div class = "col-md-12">
<p class="ui-state-default ui-corner-all ui-helper-clearfix" style="padding:4px; text-align:center;">
<span class="ui-icon ui-icon-volume-on" style="float:left; margin:-2px 5px 0 0;"></span>
<b>OVERALL</b>
</p>
<div id="master4" align="center" style=" margin:50px 50px 50px 0; color:#ffffff;"></div>
</div>
</div>
<div class = "row">
<div class = "col-md-4">
<p class="ui-state-default ui-corner-all ui-helper-clearfix" style="padding:4px; text-align:center;">
<span class="ui-icon ui-icon-volume-on" style="float:left; margin:-2px 5px 0 0;"></span>
Analytical
</p>
<div id="master1" style="width:260px; margin:15px;"></div>
<p class="ui-state-default ui-corner-all" style="padding:4px;margin-top:4em; text-align:center;">
<span class="ui-icon ui-icon-signal" style="float:left; margin:-2px 5px 0 0;"></span>
Sub Skills
</p>
<div id="eq1">
<span>88</span>
<span>77</span>
<span>55</span>
<span>33</span>
<span>40</span>
<span>45</span>
</div>
</div>
<div class = "col-md-4">
<p class="ui-state-default ui-corner-all ui-helper-clearfix" style="padding:4px; text-align:center;">
<span class="ui-icon ui-icon-volume-on" style="float:left; margin:-2px 5px 0 0;"></span>
Communication
</p>
<div id="master2" style="width:260px; margin:15px;"></div>
<p class="ui-state-default ui-corner-all" style="padding:4px;margin-top:4em; text-align:center;">
<span class="ui-icon ui-icon-signal" style="float:left; margin:-2px 5px 0 0;"></span>
Sub Skills
</p>
<div id="eq2">
<span>77</span>
<span>55</span>
<span>45</span>
<span>70</span>
</div>
</div>
<div class = "col-md-4">
<p class="ui-state-default ui-corner-all ui-helper-clearfix" style="padding:4px; text-align:center;">
<span class="ui-icon ui-icon-volume-on" style="float:left; margin:-2px 5px 0 0;"></span>
Theory
</p>
<div id="master3" style="width:260px; margin:15px;"></div>
<p class="ui-state-default ui-corner-all" style="padding:4px;margin-top:4em; text-align:center;">
<span class="ui-icon ui-icon-signal" style="float:left; margin:-2px 5px 0 0;"></span>
Sub-Skills
</p>
<div id="eq2">
<span>33</span>
<span>40</span>
<span>45</span>
<span>70</span>
</div>
</div>
</div>
</body>
</html>
您还没有在页面中包含引导滑块javascript和css。在页面中包含此css和脚本。
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/7.1.0/css/bootstrap-slider.css" >
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/7.1.0/bootstrap-slider.js"></script>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Slider - Multiple sliders</title>
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script src="jquery-ui.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<link rel="stylesheet" href="jquery-ui.css">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/7.1.0/css/bootstrap-slider.css" >
</head>
<body style="margin:10px;padding:10px">
<div class="container-fluid">
<div class = "row text-center">
<div >
<img src="logohead.jpg" style="float: center;width:250px;height:120px;">
</div>
</div>
</div>
<div class = "row">
<div class = "col-md-12">
<p class="ui-state-default ui-corner-all ui-helper-clearfix" style="padding:4px; text-align:center;">
<span class="ui-icon ui-icon-volume-on" style="float:left; margin:-2px 5px 0 0;"></span>
<b>OVERALL</b>
</p>
<div id="master4" align="center" style=" margin:50px 50px 50px 0; color:#ffffff;"></div>
</div>
</div>
<div class = "row">
<div class = "col-md-4">
<p class="ui-state-default ui-corner-all ui-helper-clearfix" style="padding:4px; text-align:center;">
<span class="ui-icon ui-icon-volume-on" style="float:left; margin:-2px 5px 0 0;"></span>
Analytical
</p>
<div id="master1" style="width:260px; margin:15px;"></div>
<p class="ui-state-default ui-corner-all" style="padding:4px;margin-top:4em; text-align:center;">
<span class="ui-icon ui-icon-signal" style="float:left; margin:-2px 5px 0 0;"></span>
Sub Skills
</p>
<div id="eq1">
<span>88</span>
<span>77</span>
<span>55</span>
<span>33</span>
<span>40</span>
<span>45</span>
</div>
</div>
<div class = "col-md-4">
<p class="ui-state-default ui-corner-all ui-helper-clearfix" style="padding:4px; text-align:center;">
<span class="ui-icon ui-icon-volume-on" style="float:left; margin:-2px 5px 0 0;"></span>
Communication
</p>
<div id="master2" style="width:260px; margin:15px;"></div>
<p class="ui-state-default ui-corner-all" style="padding:4px;margin-top:4em; text-align:center;">
<span class="ui-icon ui-icon-signal" style="float:left; margin:-2px 5px 0 0;"></span>
Sub Skills
</p>
<div id="eq2">
<span>77</span>
<span>55</span>
<span>45</span>
<span>70</span>
</div>
</div>
<div class = "col-md-4">
<p class="ui-state-default ui-corner-all ui-helper-clearfix" style="padding:4px; text-align:center;">
<span class="ui-icon ui-icon-volume-on" style="float:left; margin:-2px 5px 0 0;"></span>
Theory
</p>
<div id="master3" style="width:260px; margin:15px;"></div>
<p class="ui-state-default ui-corner-all" style="padding:4px;margin-top:4em; text-align:center;">
<span class="ui-icon ui-icon-signal" style="float:left; margin:-2px 5px 0 0;"></span>
Sub-Skills
</p>
<div id="eq2">
<span>33</span>
<span>40</span>
<span>45</span>
<span>70</span>
</div>
</div>
</div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/7.1.0/bootstrap-slider.js"></script>
<script>
$(function() {
// setup master volume
$( "#master1" ).slider({
value: 50,
orientation: "horizontal",
range: "min",
animate: true
});
// setup graphic EQ
$( "#eq1 > span" ).each(function() {
// read initial values from markup and remove that
var value = parseInt( $( this ).text(), 10 );
$( this ).empty().slider({
value: value,
range: "min",
animate: true,
orientation: "vertical"
});
});
});
$(function() {
// setup master volume
$( "#master2" ).slider({
value: 30,
orientation: "horizontal",
range: "min",
animate: true
});
// setup graphic EQ
$( "#eq2 > span" ).each(function() {
// read initial values from markup and remove that
var value = parseInt( $( this ).text(), 10 );
$( this ).empty().slider({
value: value,
range: "min",
animate: true,
orientation: "vertical"
});
});
});
$(function() {
// setup master volume
$( "#master3" ).slider({
value: 20,
orientation: "horizontal",
range: "min",
animate: true
});
// setup graphic EQ
$( "#eq3 > span" ).each(function() {
// read initial values from markup and remove that
var value = parseInt( $( this ).text(), 20 );
$( this ).empty().slider({
value: value,
range: "min",
animate: true,
orientation: "vertical"
});
});
});
$(function() {
// setup master volume
$( "#master4" ).slider({
value: 90,
orientation: "horizontal",
range: "min",
animate: true
});
// setup graphic EQ
$( "#eq4 > span" ).each(function() {
// read initial values from markup and remove that
var value = parseInt( $( this ).text(), 10 );
$( this ).empty().slider({
value: value,
range: "min",
animate: true,
orientation: "vertical"
});
});
});
</script>
</body>
</html>
相关文章：
- dhtmlx多个调度器不工作错误”;调度程序未定义”;
- Javascript 确认框工作错误
- 变量中的类工作错误
- 为什么这个jQuery验证工作错误
- Cordova罗盘API(navigator.compass.watchHeading）不工作(错误代码3）
- Javascript不能在Chrome或IE9中工作-错误”;复选框未定义“;显示在FF JS控制台中
- JQuery UI对话框不能正常工作;错误信息“TypeError: undefined不是一个函数”
- Jquery/JS css动画在悬停时工作错误
- AngularJs Ng-Keypress事件工作错误
- Jquery 选择器不工作:错误:语法错误，无法识别的表达式:a[@href]
- 日期选择器范围工作错误
- 为什么我的Jquery Ajax请求不工作错误:未定义的索引:ProID
- 反应不工作.错误提示(index):13 Uncaught SyntaxError: Unexpected token
- 身份工具箱不工作-错误代码:IDP的错误响应
- jquery日期picker beforeShowDay工作错误的月份
- Javascript验证在c#中不工作(错误消息)
- 为什么?每个函数都工作错误
- 路由到api工作错误
- 子元素位置相对工作错误
- 从timeline2.6.1的例子不工作-错误链接是未定义的时间线代码0
