javascript - js似乎冲突了，不知道是什么错误，请求帮忙

问题描述

问 题

错误信息为

Uncaught TypeError: $.ajax is not a function
    at getData (page.html:291)
    at page.html:281
    

js代码段为

<script type="text/javascript">
            function $(element) {
                return element = document.getElementById(element);
            }

            function $D() {
                var d = $('class1content');
                var h = d.offsetHeight;
                var maxh = 300;

                function dmove() {
                    h += 50; //设置层展开的速度
                    if(h >= maxh) {
                        d.style.height = '300px';
                        clearInterval(iIntervalId);
                    } else {
                        d.style.display = 'block';
                        d.style.height = h + 'px';
                    }
                }
                iIntervalId = setInterval(dmove, 2);
            }

            function $D2() {
                var d = $('class1content');
                var h = d.offsetHeight;
                var maxh = 300;

                function dmove() {
                    h -= 50; //设置层收缩的速度
                    if(h <= 0) {
                        d.style.display = 'none';
                        clearInterval(iIntervalId);
                    } else {
                        d.style.height = h + 'px';
                    }
                }
                iIntervalId = setInterval(dmove, 2);
            }

            function $use(targetid, objN) {
                var d = $(targetid);
                var sb = $(objN);
                if(d.style.display == "none") {
                    $D();
                    d.style.display = "block";
                    
                    //sb.innerHTML = "展开";
                } else {
                    $D2();
                    d.style.display = "none";
                    //sb.innerHTML = '收缩';
                }
            }
            /*初始化*/
            var counter = 0; /*计数器*/
            var pageStart = 0; /*offset*/
            var pageSize = 5; /*size*/
            /*首次加载*/
            getData(pageStart, pageSize);

            /*监听加载更多*/
            $(".icon-sjiantou03").on('tap', function() {
                counter++;
                pageStart = counter * pageSize;
                getData(pageStart, pageSize);
            });

            function getData(offset, size) {
                $.ajax({
                    type: 'GET',
                    url: '../json/blog.json',
                    dataType: 'json',
                    success: function(reponse) {

                        var data = reponse.list;
                        var sum = reponse.list.length;

                        var result = '';

                        /****业务逻辑块：实现拼接html内容并append到页面*********/

                        //console.log(offset , size, sum);

                        /*如果剩下的记录数不够分页，就让分页数取剩下的记录数
                         * 例如分页数是5，只剩2条，则只取2条
                         *
                         * 实际MySQL查询时不写这个不会有问题
                         */
                        if(sum - offset < size) {
                            size = sum - offset;
                        }

                        /*使用for循环模拟SQL里的limit(offset,size)*/
                        for(var i = offset; i < (offset + size); i++) {
                            result += '<tr class="line">' +
                                '<td>' + data[i].url + '</td>' + '<td>' + data[i].url + '</td>' + '<td>' + data[i].title + '</td>' + '<td>' + data[i].desc + '</td>' +
                                '</tr>';
                        }

                        $('.datalist').append(result);

                        /*******************************************/

                        /*隐藏more按钮*/
                        if((offset + size) >= sum) {
                            $(".icon-sjiantou03").hide();
                        } else {
                            $(".icon-sjiantou03").show();
                        }
                    },
                    error: function(xhr, type) {
                        alert('Ajax error!');
                    }
                });
            }
        </script>
        <script>
            mui.init({
                swipeBack: false
            });
            (function($) {
                $('.mui-scroll-wrapper').scroll({
                    indicators: true //是否显示滚动条
                });
                var html2 = '<ul class="mui-table-view"><li class="mui-table-view-cell">第二个选项卡子项-1</li><li class="mui-table-view-cell">第二个选项卡子项-2</li><li class="mui-table-view-cell">第二个选项卡子项-3</li><li class="mui-table-view-cell">第二个选项卡子项-4</li><li class="mui-table-view-cell">第二个选项卡子项-5</li></ul>';
                var html3 = '<ul class="mui-table-view"><li class="mui-table-view-cell">第三个选项卡子项-1</li><li class="mui-table-view-cell">第三个选项卡子项-2</li><li class="mui-table-view-cell">第三个选项卡子项-3</li><li class="mui-table-view-cell">第三个选项卡子项-4</li><li class="mui-table-view-cell">第三个选项卡子项-5</li></ul>';
                var item2 = document.getElementById('item2mobile');
                var item3 = document.getElementById('item3mobile');
                document.getElementById('slider').addEventListener('slide', function(e) {
                    if(e.detail.slideNumber === 1) {
                        if(item2.querySelector('.mui-loading')) {
                            setTimeout(function() {
                                item2.querySelector('.mui-scroll').innerHTML = html2;
                            }, 500);
                        }
                    } else if(e.detail.slideNumber === 2) {
                        if(item3.querySelector('.mui-loading')) {
                            setTimeout(function() {
                                item3.querySelector('.mui-scroll').innerHTML = html3;
                            }, 500);
                        }
                    }
                });
                var sliderSegmentedControl = document.getElementById('sliderSegmentedControl');
                $('.mui-input-group').on('change', 'input', function() {
                    if(this.checked) {
                        sliderSegmentedControl.className = 'mui-slider-indicator mui-segmented-control mui-segmented-control-inverted mui-segmented-control-' + this.value;
                        //force repaint
                        sliderProgressBar.setAttribute('style', sliderProgressBar.getAttribute('style'));
                    }
                });
            })(mui);
        </script>

解决方案

function $(element) {
    return element = document.getElementById(element);
}

这里不是把 $ 定义为一个函数了吗? 后面用 $.ajax 肯定会报错啊

这篇关于javascript - js似乎冲突了，不知道是什么错误，请求帮忙的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！