个人中心
gpt4 book ai didi

jquery - 引用错误: Can't find variable: jQuery within combined presentation plugin

转载 作者：行者123 更新时间：2023-12-01 04:19:34 24 4
gpt4 key购买 nike

我正在尝试使用 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="#">&#x25C4;</a>
            <a class="right" href="#">&#x25BA;</a>
            <a class="up" href="#">&#x25B2;</a>
            <a class="down" href="#">&#x25BC;</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>

有人看到我看不到的东西吗？

最佳答案

看起来像 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>

关于jquery - 引用错误: Can't find variable: jQuery within combined presentation plugin，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12134011/

24 4 0
文章推荐： java - COMP SCI 101 - 使用 Printf 将字段居中
文章推荐： jquery - 在JQuery中逐行突出显示span标签内容
文章推荐： java - 第一个字符在字符串中出现多少次
文章推荐： java - 是否可以使用 JRE 作为标准 VM 来实例化 Java 编译器？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com