Question

我已将html文件分为header.php，content.php和footer.php 我想在hader或footer文件中加载js文件和document.getready函数。但我得到一个错误说：未捕获的ReferenceError：$未定义。

在我的header.php中，我在head部分加载了以下脚本：

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js" async></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.2.5/jquery.fancybox.js" async></script>`

关闭后我的页脚</body> - 标记我打电话：

<script>
 $(document).ready(function() {
    if( !window.isCMS) {
        // Group images by gallery using data-fancybox-group attributes
        var galleryId = 1;
        $('.editable-gallery').each( function() {
            $(this).find('a').attr('data-fancybox', 'gallery-' + galleryId++);
        });
        $('.editable-gallery').each( function() {
            $(this).find('img').attr('width', '200');
        });
        // Initialize Fancybox

        $("[data-fancybox]").fancybox({
            // Use the alt attribute for captions per http://fancyapps.com/fancybox/#useful
            //beforeShow: function() {
              //  var alt = this.element.find('img').attr('alt');
                //this.inner.find('img').attr('alt', alt);
                //this.title = alt;
            //}
        });   
    }
});
</script>

在我的content.php文件中，我包含了我的header.php和footer.php：

<?php include ("header.php"); ?>
<?php include ("footer.php"); ?>

我如何以及在哪里实现脚本文件和document.getready函数？

这是我在content.php中的图库代码： <div id="my-gallery" class="editable-gallery"> <a href="fotos/2018/rl/02022018/3.jpg"><img src="fotos/2018/rl/02022018/3.jpg" alt=""></a> <a href="fotos/2018/rl/02022018/1.jpg"><img src="fotos/2018/rl/02022018/1.jpg" alt=""></a> <a href="fotos/2018/rl/02022018/3.jpg"><img src="fotos/2018/rl/02022018/3.jpg" alt=""></a> </div> 我必须添加attr“data-fancybox”和“width”才能使用fancybox。

Answer 1

第1名： - 错误来自src="http://code.jquery.com/jquery-latest.min.js"，应该是https而不是http＆gt;＆gt; src="https://code.jquery.com/jquery-latest.min.js"

第二名： - 您可以在<head>或之前 </body>

包含js文件或js代码

第3名： - 您可以在<script></script>到<head>的任何地方使用</body>，甚至可以在包含您的jquery BUT 的行之前使用$(document).ready(function(){ //code here })

注意：如果您有任何插件，则必须在包含jquery之后包含插件

你的js代码工作正常

＆＃13;

$(document).ready(function() {
    //if( !window.isCMS) {
        // Group images by gallery using data-fancybox-group attributes
        var galleryId = 1;
        $('.editable-gallery').each( function() {
            $(this).find('a')
            .attr('data-fancybox', 'gallery-' + galleryId++).find('img').attr('width' , '200');
        });
        // Initialize Fancybox

        $("[data-fancybox]").fancybox({
            // Use the alt attribute for captions per http://fancyapps.com/fancybox/#useful
            //beforeShow: function() {
              //  var alt = this.element.find('img').attr('alt');
                //this.inner.find('img').attr('alt', alt);
                //this.title = alt;
            //}
        });   
    //}
});

＆＃13;

<!-- 1. Add latest jQuery and fancyBox files -->

<script src="//code.jquery.com/jquery-3.3.1.min.js"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.2.5/jquery.fancybox.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.2.5/jquery.fancybox.min.js"></script>


<!-- 2. Create links -->

<div id="my-gallery" class="editable-gallery">
<a href="http://via.placeholder.com/350x150"><img src="http://via.placeholder.com/350x150" alt=""></a>
<a href="http://via.placeholder.com/350x150"><img src="http://via.placeholder.com/350x150" alt=""></a>
<a href="http://via.placeholder.com/350x150"><img src="http://via.placeholder.com/350x150" alt=""></a>
</div>


<!-- 3. Have fun! -->

＆＃13;

如何在使用多个php文件时加载Jquery

1 个答案: