整个页面除了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();
})

RahodJoe 2019-12-22

源自：实战：挂号平台首页 5-10 首页.UI组件-UiCascading（下）

收起

2回答

好帮手慕夭夭回答被采纳获得+3积分 2019-12-22 15:30:27

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

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

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

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

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

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

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

收起回答

RahodJoe 提问者 #1

sssss

2019-12-22 15:43:01

提问者 RahodJoe 2019-12-22 15:41:08

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

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