Uncaught TypeError:$(...). myScroll is not a function

沐道PHP
137 阅读2分钟

今天,有朋友找我帮她添加一个li列表自上向下滚动功能,而且还给我提供了参考页面,说只要把A页面上的这块功能给我复制到B页面上就可以了.我看着应该很简单的功能,就答应帮她搞搞.谁知道,这个功能从A页面复制到B页面的时候就出错了,这个错误一搞就是2个小时特在此记录一下.网上其实已经有答案了,我之所以在记录一编的原因就是使用情景和网上已有的情景不一样. 错误截图:

js1.png

 他的网页属于织梦CMS的框架模板页面,我把A页面的滚动功能,复制到B页面之所以不能使用,报这个错误是因为我要引用的JS文件放在了jquery的前面.之所以让我耗费两个小时的原因,是因为在页面中我肉眼可见的页面引入的JS文件和Jquery文件顺序没有错误.
 ```
 <head>
<meta charset="UTF-8"/>
<title>八字综合详批-</title>
<meta name="viewport"
      content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<meta content="yes" name="apple-mobile-web-app-capable"/>
<meta content="black" name="apple-mobile-web-app-status-bar-style"/>
<meta content="telephone=no" name="format-detection"/>
<link rel="shortcut icon" href="/statics/ffsm/favicon.ico"/>
<!--下面两个JS文件是产生问题的文件-->
<script src="https://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://www.zongcandaozhang.cn/statics/ffsm/xmpeidui/2/images/scroll.js"></script>
```

如代码所示,我的引用顺序没有错,但是滚动效果就是出不来,而我审查元素查看网络请求,jquery文件的加载顺序确实是在后面,而不是在scroll.js的前面.

经过排查,分批次注释页面代码,最后发现,我在头部中引入的jquery文件,看起来是先scroll.js先调用,但是,在实际效果中,被织梦框架引用的尾部文件把jquery文件覆盖导致的这个问题.解决办法,就是直接把scroll.js文件放在HTML文件的最底部即可.

以下是全部的文件代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8"/>
    <title>月老姻缘-八字综合详批-<{$zhanming}></title>
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <meta content="yes" name="apple-mobile-web-app-capable"/>
    <meta content="black" name="apple-mobile-web-app-status-bar-style"/>
    <meta content="telephone=no" name="format-detection"/>
    <link rel="shortcut icon" href="/statics/ffsm/favicon.ico"/>
    <link href="/statics/ffsm/bzyy/bzyy1.css" type="text/css" rel="stylesheet"/>
    <{include file='./ffsm/wx_share.tpl'}>
    <!-- 不起作用的引用JS文件方法 -->
    <script src="https://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript" src="/statics/ffsm/xmpeidui/2/images/scroll.js"></script>
    <!-- 不起作用的引用JS文件方法   正确方法吧scroll.js放置在最底部 -->
</head>
<body>


<div class="container" id="container">
    <div class="wrapper" id="wrapper">

        <section data-reactroot="">

            <!--添加滚动好评开始 -->
            <div class="order_info" style="border:1px solid red;">
                <div class="card_box">
                    <div class="list_lh">
                        <ul>
                            <li>
                                <p><a href="#">5分钟前</a><a href="#">河南</a> <a href="">王*怡</a> <a>成功获得测试结果</a></p>
                            </li>
                            <li>
                                <p><a href="#">46秒前</a><a href="#">安徽</a> <a href="">李园*</a> <a>正在填写资料</a></p>
                            </li>

                            <li>
                                <p><a href="#">3分钟前</a><a href="#">陕西</a> <a href="">孙瑾*</a> <a>成功获得测试结果</a></p>
                            </li>
                            <li>
                                <p><a href="#">47秒前</a><a href="#">四川</a> <a href="">赵*安</a> <a>正在填写资料</a></p>
                            </li>
                            <li>
                                <p><a href="#">56秒前</a><a href="#">湖北</a> <a href="">周*琳</a> <a>正在填写资料</a></p>
                            </li>
                            <li>
                                <p><a href="#">25分钟前</a><a href="#">海南</a> <a href="">王雪*</a> <a>成功获得测试结果</a></p>
                            </li>
                            <li>
                                <p><a href="#">18分钟前</a><a href="#">江西</a> <a href="">孙*亚</a> <a>成功获得测试结果</a></p>
                            </li>
                            <li>
                                <p><a href="#">15分钟前</a><a href="#">贵州</a> <a href="">王辰*</a> <a>成功获得测试结果</a></p>
                            </li>
                            <li>
                                <p><a href="#">3分钟前</a><a href="#">辽宁</a> <a href="">李*鹏</a> <a>成功获得测试结果</a></p>
                            </li>
                            <li>
                                <p><a href="#">2分钟前</a><a href="#">黑龙江</a> <a href="">郭*小</a> <a>成功获得测试结果</a></p>
                            </li>
                            <li>
                                <p><a href="#">31分钟前</a><a href="#">内蒙古</a> <a href="">张大*</a> <a>成功获得测试结果</a></p>
                            </li>
                            <li>
                                <p><a href="#">8分钟前</a><a href="#">西藏</a> <a href="">刘*鹏</a> <a>成功获得测试结果</a></p>
                            </li>
                            <li>
                                <p><a href="#">1分钟前</a><a href="#">河北</a> <a href="">元*长</a> <a>成功获得测试结果</a></p>
                            </li>
                            <li>
                                <p><a href="#">3分钟前</a><a href="#">新疆</a> <a href="">臧*海</a> <a>成功获得测试结果</a></p>
                            </li>
                            <li>
                                <p><a href="#">5分钟前</a><a href="#">山西</a> <a href="">王*</a> <a>成功获得测试结果</a></p>
                            </li>

                        </ul>
                    </div>

                </div>
            </div>

            <script type="text/javascript">
                $(document).ready(function () {
                    $('.list_lh li:even').addClass('lieven');
                })
                $(function () {
                    $("div.list_lh").myScroll({
                        speed: 40, //数值越大，速度越慢
                        rowHeight: 50 //li的高度
                    });
                });
            </script>

            <!--添加滚动好评结束 -->
        </section>

    </div>
</div>


<{include file='./ffsm/footers.tpl'}>
<{include file='./ffsm/dl_ck.tpl'}>
<!--把滚动效果的js文件放置到这里,就可以了-->
<script type="text/javascript" src="/statics/ffsm/xmpeidui/2/images/scroll.js"></script>

</body>
</html>

为了节约篇幅,删除了无关的代码和js.最后总结.当提示$(...). myScroll is not a function错误的时候,就是说明引用的JS特效文件加载在了jquery文件的前面导致的.要注意CMS模板中页面拆分导致的文件jquery文件被覆盖的bug.

avatar
文章
阅读
粉丝