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

【问题标题】：How to load Jquery when using multiple php files使用多个php文件时如何加载Jquery
【发布时间】：2018-04-02 12:32:00
【问题描述】：

我已将我的 html 文件分为 header.php、content.php 和 footer.php 我想在 hader 或页脚文件中加载 js 文件和 document.getready 函数。但我收到一条错误消息：未捕获的 ReferenceError: $ is not defined。

在我的 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>-Tag 我打电话：

<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。

【问题讨论】：

您是否在包含 header.php 文件的行上方使用了 $ 的任何 jquery 代码？
向我们展示将生成的（简化的）html 代码
那是因为您在脚本中使用了async 属性。
这是异步属性。现在可以了！

标签： php jquery

【解决方案1】：

第一个：- 错误来自src="http://code.jquery.com/jquery-latest.min.js" 它应该是https 而不是http >> src="https://code.jquery.com/jquery-latest.min.js"

2nd:-你可以在<head>或之前</body>中包含js文件或js代码

3rd:-你可以在任何地方使用<script></script>，从<head>到</body>，甚至在你包含jquery的行之前但是使用$(document).ready(function(){ //code here }) p>

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

你的 js 代码运行良好

$(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;
            //}
        });   
    //}
});

<!-- 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! -->

【讨论】：

问题仍然存在：这是我 content.php 中的 Gallery-Code
上面我包含了来自 content.php 的 Gallery-Code
@Francisco 我更新了我的答案检查演示它工作得很好.. 确保在</body> 之前包含您的代码而不是在它之后