我正在尝试使用与此reveal.js的功能相结合的flipin plugin进行演示，但我失去了所需功能的翻转效果并获得了
ReferenceError：找不到变量：jQuery
使用引用第1行或只是错误消息，如果我改变了一些东西 - 我已经尝试了变量上所有流行的和不那么流行的差异。这很常见，除了代码本身完全正常，所以我很困惑。
问题代码：
$(document).ready(function(){
/* The following code is executed once the DOM is loaded */
$('.sponsorFlip').bind("click",function(){
// $(this) point to the clicked .sponsorFlip element (caching it in elem for speed):
var elem = $(this);
// data('flipped') is a flag we set when we flip the element:
if(elem.data('flipped'))
{
// If the element has already been flipped, use the revertFlip method
// defined by the plug-in to revert to the default state automatically:
elem.revertFlip();
// Unsetting the flag:
elem.data('flipped',false)
}
else
{
// Using the flip method defined by the plugin:
elem.flip({
direction:'lr',
speed: 350,
onBefore: function(){
// Insert the contents of the .sponsorData div (hidden from view with display:none)
// into the clicked .sponsorFlip div before the flipping animation starts:
elem.html(elem.siblings('.sponsorData').html());
}
});
// Setting the flag:
elem.data('flipped',true);
}
});
});
有什么想法吗？
我想也许我错过了html中的内容：
<head>
<meta charset="utf-8">
<title>HUE2</title>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<link href='http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/print.css" type="text/css" media="print">
<link rel="stylesheet" href="lib/zenburn.css">
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<div id="reveal">
<!-- Used to fade in a background when a specific slide state is reached -->
<div class="state-background"></div>
<!-- Any section element inside of this container is displayed as a slide -->
<div class="slides">
<section>
<div id="main">
<div class="sponsorListHolder">
<div class="sponsor" title="Click to flip">
<div class="sponsorFlip">
</div>
<div class="sponsorData">
<div class="sponsorDescription">
</div>
<div class="sponsorURL">
</div>
</div>
</div>
<div class="sponsor" title="Click to flip">
<div class="sponsorFlip">
</div>
<div class="sponsorData">
<div class="sponsorDescription">
</div>
<div class="sponsorURL">
</div>
</div>
</div>
<div class="sponsor" title="Click to flip">
<div class="sponsorFlip">
</div>
<div class="sponsorData">
<div class="sponsorDescription">
</div>
<div class="sponsorURL">
</div>
</div>
</div>
<div class="sponsor" title="Click to flip">
<div class="sponsorFlip">
</div>
<div class="sponsorData">
<div class="sponsorDescription">
</div>
<div class="sponsorURL">
</div>
</div>
</div>
<div class="sponsor" title="Click to flip">
<div class="sponsorFlip">
</div>
<div class="sponsorData">
<div class="sponsorDescription">
</div>
<div class="sponsorURL">
</div>
</div>
</div>
<div class="clear"></div>
</div>
<!-- The navigational controls UI -->
<aside class="controls">
<a class="left" href="#">◄</a>
<a class="right" href="#">►</a>
<a class="up" href="#">▲</a>
<a class="down" href="#">▼</a>
</aside>
<!-- Displays presentation progress, max value changes via JS to reflect # of slides -->
<div class="progress"><span></span></div>
</div>
<!-- Optional libraries for code syntax highlighting and classList support in IE9 -->
<script src="lib/highlight.js"></script>
<script src="lib/classList.js"></script>
<script src="js/reveal.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/jquery.flip.min.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/script.js"></script>
<script>
// Parse the query string into a key/value object
var query = {};
location.search.replace( /[A-Z0-9]+?=(\w*)/gi, function(a) {
query[ a.split( '=' ).shift() ] = a.split( '=' ).pop();
} );
// Fires when a slide with data-state=customevent is activated
Reveal.addEventListener( 'customevent', function() {
alert( '"customevent" has fired' );
} );
// Fires each time a new slide is activated
Reveal.addEventListener( 'slidechanged', function( event ) {
// event.indexh & event.indexv
} );
Reveal.initialize({
// Display controls in the bottom right corner
controls: true,
// Display a presentation progress bar
progress: true,
// If true; each slide will be pushed to the browser history
history: true,
// Loops the presentation, defaults to false
loop: false,
// Flags if mouse wheel navigation should be enabled
mouseWheel: true,
// Apply a 3D roll to links on hover
rollingLinks: true,
// UI style
theme: query.theme || 'neon', // default/neon
// Transition style
transition: query.transition || 'default' // default/cube/page/concave/linear(2d)
});
hljs.initHighlightingOnLoad();
</body>
有人看到我不喜欢的东西吗？
答案 0 :(得分：2)
看起来Flip plugin需要jQueryUI。
你还需要首先包含jQuery，如下所示：
<script src="js/jquery.min.js"></script>
<script src="lib/highlight.js"></script>
<script src="lib/classList.js"></script>
<script src="js/reveal.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/jquery.flip.min.js"></script>
<script src="js/script.js"></script>