このflipinプラグインの機能と結合されたreveal.jsでプレゼンテーションを機能させようとしていますが、目的の機能であるフリップ効果が失われ、
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>
誰かが私が見ないものを見ますか？