我遵循了一个示例代码，最终得到了一个无效的应用程序。我再次检查并检查它“应该”可以正常工作，但事实并非如此。所以我问你是否可以确定我哪里出错：/
这是我的html：
<!DOCTYPE html>
<html>
<head>
<title>Web3D</title>
<meta name="viewport" content="initial-scale=1, user-scalable=no, width=device-width">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/themes/css.css" />
<link rel="stylesheet" href="css/themes/css.min.css" />
<link rel="stylesheet" href="css/themes/jquery.mobile.icons.min.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile.structure-1.4.2.min.css" />
<link rel="stylesheet" type="text/css" href="http://www.x3dom.org/download/dev/x3dom.css"></link>
<script type="text/javascript" src="http://www.x3dom.org/download/dev/x3dom.js"></script>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
<script src="js/colorScript.js"></script>
<style>
label { width: 100px; float: left; clear: both; }
#ctrlContainer { border: 1px solid #000; padding: 20px; float: left; width: 280px; margin-left: 20px; }
#sliderContainer div { float:left; width: 200px; }
#sliderContainer li { height: 25px; }
#sliderContainer ul { clear: both; list-style-type: none; margin: 20px 0 10px 0; padding: 0; }
</style>
</head>
<body>
<!-- PAGE 1 -->
<div data-role="page" id="first" data-theme="a">
<div data-role="header" data-position="fixed">
<h1>Something Rotating | Homework 1</h1>
</div><!-- /header -->
<!-- NAVIGATION -->
<div data-role="header">
<div data-role="navbar">
<ul>
<li><a href="#first" data-transition="flip" data-icon="info">Something Rotating</a></li>
<li><a href="#second" data-transition="flip" data-icon="user">Controlling Objects</a></li>
<li><a href="#third" data-transition="flip" data-icon="location">Inline Importing</a></li>
</ul>
</div><!-- /navbar -->
</div><!-- /header -->
<!-- /NAVIGATION -->
<div data-role="content">
<x3d width="500px" height="400px">
<scene>
<transform id="objectToAnimate">
<shape>
<appearance>
<material diffuseColor='red'></material>
<imageTexture url='textures/bamboo.jpg'></imageTexture>
</appearance>
<box/>
</shape>
</transform>
<timeSensor id="time" loop="true" cycleInterval="4"/>
<orientationInterpolator id="objectAnimatation" key="0 0.5 1" keyValue="0 1 0 0 0 1 0 1.57079 0 1 0 3.14159 0 1 0 4.71239 0 1 0 6.28317"></orientationInterpolator>
<ROUTE fromNode='time' fromField='fraction_changed' toNode='objectAnimatation' toField='set_fraction'></ROUTE>
<ROUTE fromNode='objectAnimatation' fromField='value_changed' toNode='objectToAnimate' toField='set_rotation'></ROUTE>
</scene>
</x3d>
</div><!-- /content -->
<!-- CONTENT -->
<div data-role="footer" data-position="fixed">
<h4>This is the footer</h4>
</div><!-- /footer -->
<!-- /CONTENT -->
</div><!-- /page -->
<!-- /PAGE 1 -->
<!-- PAGE 2 -->
<div data-role="page" id="second" data-theme="a">
<div data-role="header" data-position="fixed" data-add-back-btn="true">
<h1>Controlling Objects | Homework 2</h1>
</div><!-- /header -->
<!-- NAVIGATION -->
<div data-role="header">
<div data-role="navbar">
<ul>
<li><a href="#first" data-transition="flip" data-icon="info">Something Rotating</a></li>
<li><a href="#second" data-transition="flip" data-icon="user">Controlling Objects</a></li>
<li><a href="#third" data-transition="flip" data-icon="location">Inline Importing</a></li>
</ul>
</div><!-- /navbar -->
</div><!-- /header -->
<!-- /NAVIGATION -->
<div data-role="content">
<h2>Change the color of the cube using the RGB sliders, which updates the "diffuseColor" attribute of the Material node using jQuery.</h2>
<!--SCENE STARTS-->
<x3d xmlns="http://www.web3d.org/specifications/x3d-namespace" id="spheres" showStat="true" x="0px" y="0px" width="400px" height="400px" style="float:left;">
<scene DEF='scene'>
<transform id="objectToAnimate">
<shape>
<appearance>
<material diffuseColor='0 0 0' specularColor='.2 .2 .2'></material>
</appearance>
<box DEF='box'/>
</shape>
</transform>
<timeSensor id="time" loop="true" cycleInterval="4"/>
<orientationInterpolator id="objectAnimatation" key="0 0.5 1" keyValue="0 1 0 0, 0 1 0 3, 0 1 0 6"></orientationInterpolator>
<ROUTE fromNode='time' fromField='fraction_changed' toNode='objectAnimatation' toField='set_fraction'></ROUTE>
<ROUTE fromNode='objectAnimatation' fromField='value_changed' toNode='objectToAnimate' toField='set_rotation'></ROUTE>
</scene>
</x3d>
<!--/SCENE ENDS-->
<!--CONTROLLER STARTS-->
<div id="ctrlContainer">
<div id="sliderContainer">
<ul>
<li><label>Red</label><div id="redSlider" class="slider"/></li>
<li><label>Green</label><div id="greenSlider" class="slider"/></li>
<li><label>Blue</label><div id="blueSlider" class="slider"/></li>
</ul>
</div>
</div>
<!--/CONTROLLER ENDS-->
</div><!-- /content -->
<!-- CONTENT -->
<div data-role="footer" data-position="fixed">
<h4>This is the footer</h4>
</div><!-- /footer -->
<!-- /CONTENT -->
</div><!-- /page -->
<!-- /PAGE 2 -->
<!-- PAGE 3 -->
<div data-role="page" id="third" data-theme="a">
<div data-role="header" data-position="fixed" data-add-back-btn="true">
<h1>Inline Importing | Homework 3</h1>
</div><!-- /header -->
<!-- NAVIGATION -->
<div data-role="header">
<div data-role="navbar">
<ul>
<li><a href="#first" data-transition="flip" data-icon="info">Something Rotating</a></li>
<li><a href="#second" data-transition="flip" data-icon="user">Controlling Objects</a></li>
<li><a href="#third" data-transition="flip" data-icon="location">Inline Importing</a></li>
</ul>
</div><!-- /navbar -->
</div><!-- /header -->
<!-- /NAVIGATION -->
<div data-role="content">
<h2>Change the color of the cube using the RGB sliders, which updates the "diffuseColor" attribute of the Material node using jQuery.</h2>
<!--SCENE STARTS-->
<x3d xmlns="http://www.web3d.org/specifications/x3d-namespace" id="spheres" showStat="true" x="0px" y="0px" width="400px" height="400px" style="float:left;">
<scene DEF='scene'>
<transform id="objectToAnimate">
<shape>
<appearance>
<material diffuseColor='0 0 0' specularColor='.2 .2 .2'></material>
</appearance>
<box DEF='box'/>
</shape>
</transform>
<timeSensor id="time" loop="true" cycleInterval="4"/>
<orientationInterpolator id="objectAnimatation" key="0 0.5 1" keyValue="0 1 0 0, 0 1 0 3, 0 1 0 6"></orientationInterpolator>
<ROUTE fromNode='time' fromField='fraction_changed' toNode='objectAnimatation' toField='set_fraction'></ROUTE>
<ROUTE fromNode='objectAnimatation' fromField='value_changed' toNode='objectToAnimate' toField='set_rotation'></ROUTE>
</scene>
</x3d>
<!--/SCENE ENDS-->
<!--CONTROLLER STARTS-->
<div id="ctrlContainer">
<div id="sliderContainer">
<ul>
<li><label>Red</label><div id="redSlider" class="slider"/></li>
<li><label>Green</label><div id="greenSlider" class="slider"/></li>
<li><label>Blue</label><div id="blueSlider" class="slider"/></li>
</ul>
</div>
</div>
<!--/CONTROLLER ENDS-->
</div><!-- /content -->
<!-- CONTENT -->
<div data-role="footer" data-position="fixed">
<h4>This is the footer</h4>
</div><!-- /footer -->
<!-- /CONTENT -->
</div><!-- /page -->
<!-- /PAGE 3 -->
</body>
</html>
以下是标题中链接的'js / colorScript.js'的内容：
$(document).ready(function(){
// Create the sliders
$(".slider").slider({min: 0, max: 1, step: 0.01, slide: function(e, ui) {
var newCol = $("#redSlider").slider('option', 'value') + " "
+ $("#greenSlider").slider('option', 'value') + " "
+ $("#blueSlider").slider('option', 'value');
$("Material").attr("diffuseColor", newCol);
}});
});
它应该有效，但不是......