整个页面除了ui-cascading有问题,其他没有,控制台的报错不会处理

整个页面除了ui-cascading有问题,其他没有,控制台的报错不会处理

超出100000字符?你们老师解决问题又要全部代码,我把html,ui.css和base.css,layout.css,jquerymin1.7.1,ui.js,data.js复制过来,卡都卡死了,下面框外红字说超出10W字符,然后我删除得只剩下html,和data.js还是超出10W,就是断了同学的学习困难,问问题的心了呗?慕课网真有你的,我服。我复制一小段可以了吧?真的晦气

//ui-cascading
$.fn.UiCascading = function(){
    var ui = $(this);
    var selects = $('select',ui);
    selects
    .on('change',function(){
        var val = $(this).val();       
        var index = selects.index(this);
        //触发下一个select的更新,根据当前的值
       var where = $(this).attr('data-where');
       where = where ? where.split(',') : [];
       where.push($(this).val());
       selects.eq(index+1)
        .attr('data-where',where.join(','))
        .triggerHandler('reloadOptions');
        //触发下一个之后的select的初始化(清楚不应该的数据项)
        ui.find('select:gt('+ (index+1) +')').each(function(){
            $(this)
            .attr('data-where','')
            .triggerHandler('reloadOptions');
        })
        
         
    })
    .on('reloadOptions',function(){
        var method = $(this).attr('data-search');
        var args = $(this).attr('data-where').split(',');
        var data = AjaxRemoteGetData[method].apply(this,args);
        var select = $(this);
        select.find('option').remove();
        $.each(data,function(i,item){
            var el = $('<option value="'+item+'">'+item+'</option>');
            select.append(el);
        });
    });
    selects.eq(0).triggerHandler('reloadOptions');
}

//页面脚本逻辑
$(function(){
    $('.ui-search').UiSearch();
    $('.content-tab').UiTab('.caption > .item','.block > .item');
    $('.content-tab .block .item').UiTab('.block-caption > a','.block-content > .block-warp' , 'block-caption-');
    $('body').UiBackTop();
    $('.ui-slider').UiSlider();
    $('.ui-cascading').UiCascading();
})


正在回答

登陆购买课程后可参与讨论,去登陆

2回答

同学你好,你的心情老师能够理解,但是请消消气,老师解释一下:

1.以前经常有同学上传其中一段代码说有报错,而老师把代码放在源码中测试着没有问题。老师们只能再要一次,这样来回要代码解决问题的效率就比较低。所以让同学们一次性把全部代码粘贴到问答区,也是为了更准备,高效率的帮大家解决问题哦。

问答区的设立肯定是要帮助大家解决问题的,字数的限制并不是故意让大家不提问,绝大多数的问题都不会超出字数限制的。当然了,同学说的这个问题老师也会反馈给研发部门的。目前,如果实在太多,同学可以在回复区域粘贴的。先提交一个问题,然后自己在我要回答中继续粘贴代码即可哦。

http://img1.sycdn.imooc.com//climg/5dff19b7096bec9f09210143.jpg

2.另外,把同学的代码放在源码中测试,报错如下:

http://img1.sycdn.imooc.com//climg/5dff1a760912642c09030266.jpg

报错说UiSearch并不是一个函数,也就是js中没有定义这个方法。因为其他的代码没有粘贴上来,同学检查一下是不是拼错了,源码中的方法名称是UiSearh ,如下:

http://img1.sycdn.imooc.com//climg/5dff1aca09beddb404210079.jpg

看看自己代码中是不是也是定义的UiSearh ,如果与源码中一样,就把调用方法的地方名称改过来:

http://img1.sycdn.imooc.com//climg/5dff1b19090b2e4604400134.jpg

如果我的回答帮助到了你,欢迎采纳,祝学习愉快~


  • RahodJoe 提问者 #1
    sssss
    2019-12-22 15:43:01
提问者 RahodJoe 2019-12-22 15:41:08
//ui-search组件定义
$.fn.UiSearch = function(){
    var ui = $(this);
    $('.ui-search-selected',ui).on('click',function(){
        $('.ui-search-select-list').show();
        return false;//防止body点击触发隐藏,导致点击这里不显示列表
    });
    $('.ui-search-select-list a',ui).on('click',function(){
        $('.ui-search-selected').text($(this).text());
        $('.ui-search-select-list').hide();
        return false;
    });
    $('body').on('click',function(){
        $(".ui-search-select-list").hide();
    });
}
//ui-seach组件定义结束
/** 
* @param{string} header TAB组件的选项卡切换部分className,里面有若干个.item
* @param{string} content TAB组件内容区域部分className,里面有若干个.item
* @option{string} foucus_prefix 选项卡高亮样式前缀,可选
*/
 
//ui-tab  选项卡定规
$.fn.UiTab = function(header,content,focus_prefix){
    var ui = $(this),
        tabs = $(header,ui),
        cons = $(content,ui),
        focus_prefix = focus_prefix || '';

        tabs.on('click',function(){
            var index = $(this).index();
            tabs.removeClass('item_focus').eq(index).addClass('item_focus');
            cons.hide().eq(index).show();

            return false;
        });
}
//选项卡结束

//ui-BackTop
$.fn.UiBackTop = function(){
    var ui = $(this);
    var el = $('<a class="ui-backTop" href="#0"></a>');
    ui.append( el );

    var windowHeight = $(window).height();

    $(window).on('scroll',function(){
        var top = $('html,body').scrollTop();
        if(top > windowHeight){
            el.show();
        }else{
            el.hide();
        }
    });
    el.on('click',function(){
        $(window).scrollTop(0);
    });
}

// ui-slidder
//  1. 左右箭头需要能控制翻页
//  2. 翻页的时候,进度点,要联动进行focus
//  3. 翻到第三页的时候,下一页需要回到 第一页,翻到第一页的时候,同理
//  4. 进度点,在点击的时候,需要切换到对应的页面
//  5. 没有(进度点点击、翻页操作)的时候需要进行自动滚动
//  6. 滚动过程中,屏蔽其他操作(自动滚动、左右翻页、进度点点击)
//  7. 高级-无缝滚动
$.fn.UiSlider = function(){
    var ui = $(this);
    var wrap = $('.ui-slider-wrap');
    var btn_prev = $('.ui-slider-arrow .left',ui);
    var btn_next = $('.ui-slider-arrow .right',ui);
    var items  = $('.ui-slider-wrap .item',ui);
    var tips  =$('.ui-slider-process .item',ui);
    //  预定义
    var current = 0;
    var size = items.size();
    var width = items.eq(0).width();
    var enableAuto = true;

    //设置自动滚动感应(如果鼠标在wrap中停止自动滚动)
    ui.on('mouseover',function(){
        enableAuto = false;
    }).on('mouseout',function(){
        enableAuto = true;
    })
    //  具体操作
    wrap
    .on('move_prev',function(){
        if(current<=0){
            current = size;
        }
        current = current - 1;
        wrap.triggerHandler('move_to',current);
    })
    .on('move_next',function(){
        if(current>=size-1){
            current = -1;
        }
        current = current + 1;
        wrap.triggerHandler('move_to',current);
    })
    .on('move_to',function(evt,index){
        wrap.css('left',index*width*-1);
        tips.removeClass('item_focus').eq(index).addClass('item_focus');
    })
    .on('auto_move',function(){
        setInterval(function(){
          enableAuto && wrap.triggerHandler('move_next');
        },2000);
    })
    .triggerHandler('auto_move');
    //  事件
    btn_prev.on('click',function(){
        wrap.triggerHandler('move_prev');
    });
    btn_next.on('click',function(){
        wrap.triggerHandler('move_next');
    });
    tips.on('click',function(){
        var index = $(this).index();
        current = index;
        wrap.triggerHandler('move_to',index);
    })
}
//ui-cascading
$.fn.UiCascading = function(){
    var ui = $(this);
    var selects = $('select',ui);
    selects
    .on('change',function(){
        var val = $(this).val();       
        var index = selects.index(this);
        //触发下一个select的更新,根据当前的值
       var where = $(this).attr('data-where');
       where = where ? where.split(',') : [];
       where.push($(this).val());
       selects.eq(index+1)
        .attr('data-where',where.join(','))
        .triggerHandler('reloadOptions');
        //触发下一个之后的select的初始化(清楚不应该的数据项)
        ui.find('select:gt('+ (index+1) +')').each(function(){
            $(this)
            .attr('data-where','')
            .triggerHandler('reloadOptions');
        })
        
         
    })
    .on('reloadOptions',function(){
        var method = $(this).attr('data-search');
        var args = $(this).attr('data-where').split(',');
        var data = AjaxRemoteGetData[method].apply(this,args);
        var select = $(this);
        select.find('option').remove();
        $.each(data,function(i,item){
            var el = $('<option value="'+item+'">'+item+'</option>');
            select.append(el);
        });
    });
    selects.eq(0).triggerHandler('reloadOptions');
}

//页面脚本逻辑
$(function(){
    $('.ui-search').UiSearch();
    $('.content-tab').UiTab('.caption > .item','.block > .item');
    $('.content-tab .block .item').UiTab('.block-caption > a','.block-content > .block-warp' , 'block-caption-');
    $('body').UiBackTop();
    $('.ui-slider').UiSlider();
    $('.ui-cascading').UiCascading();
})


问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
2.组件化网页开发
  • 参与学习           人
  • 提交作业       1121    份
  • 解答问题       14456    个

本阶段在运用JS实现动态网页开发的基础上,带你深入理解企业开发核心思想,完成一个企业级网页的开发,体验前端工程师的成就感。

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师