老师问几个问题。。

老师问几个问题。。

1:35-1:41是什么意思,看不懂,data-where是什么鬼

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

2.这是什么意思?是拼接吗?没看明白。 这里是$(....)提取里面这个元素。可是这里面写的我在html里面找不到这个咋提取?

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

3.这个是拼接的意思吗还是什么意思?拼接不是应该这样+'item'+吗? 怎么是'+item+'这样写呢?

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

4.这个是什么来的?从哪里跑过来的。。越看越懵逼啊。。

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

正在回答 回答被采纳积分+1

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

4回答
好帮手慕星星 2020-03-24 09:46:57

同学你好,push是往后面添加内容,所以没有问题

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

医院等级是后选择的,所以在数组中的后面。例如:

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

自己可以再理解下,祝学习愉快!

好帮手慕星星 2020-03-21 17:38:14

同学你好,问题解答如下:

可以先看一下下面代码的注释:

/ ui-cascading
$.fn.UiCascading = function() {
    var ui = $(this);
    // 获取所有下拉列表元素
    var selects = $('select', ui);

    //给所有下拉列表绑定改变事件
    selects
        .on('change', function() {
            // 获取当前列表选中的值,例如'朝阳区'
            var val = $(this).val();
            // 获取当前select的索引

            var index = selects.index(this);

            //	触发下一个 select 的更新,根据当前的值

            // 获取当前下拉列表的data-where属性值
            var where = $(this).attr('data-where');

            // 判断data-where属性是否有值,如果有就分隔,没有赋值为[]
            where = where ? where.split(',') : [];
            // 在属性值中添加当前下拉列表选择的值
            where.push($(this).val());

            // 更新当前的下一个列表data-where属性值
            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');
            })


        })
        // 绑定自定义reloadOptions事件
        .on('reloadOptions', function() {
            // 获取select的data-search属性值
            var method = $(this).attr('data-search');
            // 获取select的data-where属性值并分隔为字符串
            var args = $(this).attr('data-where').split(',');
            // 从通过字符串参数从data.js文件中获取数据
            var data = AjaxRemoteGetData[method].apply(this, args);
            var select = $(this);
            // 将原有的option移除
            select.find('option').remove();
            // 将获取的指定数据遍历,和option标签拼接,重新添加到select中
            $.each(data, function(i, item) {
                var el = $('<option value="' + item + '">' + item + '</option>');
                select.append(el);
            });
        });
    // 默认第一个的select触发更新事件

    selects.eq(0).triggerHandler('reloadOptions');
}

这段代码主要操作就是选择一个select之后,下一个select会更新data-where记录,下面所有的select会根据当前的选择更新内容。

1、data-where是自定义的属性名(可以更改),用来存储选择信息的。在这里添加的

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

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

2、是拼接option标签以及内容,最后追加到select元素中。使用$()还可以将DOM对象变为jQuery对象,然后追加到select中

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

3、关于拼接,理解有问题。item是变量,不需要添加引号变为字符串。例如:

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

变量a与左右字符串拼接。

4、$(this)是当前选择的select元素,$(this).val()是选择的值,例如第一个选择‘西城区’,那么获取出来的就是西城区。where数组中就会将这个值放进去,当选择第二个select的时候,例如‘三级甲等’,那么where数组中就是[西城区,三级甲等] 。下一个select中就会将这些数据添加到data-where中,所以需要使用join方法,将数组使用逗号连接为字符串

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

也就是这样使用

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

自己再测试理解下,祝学习愉快!

  • 提问者 陈立天 #1
    老师第四点回答我有点不理解, $(this).val()选择当前值 然后where.push( $(this).val() ); 这里push的话不应该是[三级甲等,西城区] 了吗 push不是往后面添加内容吗? 怎么会是返回的是[西城区,三级甲等]呢?
    2020-03-23 19:45:17
提问者 陈立天 2020-03-20 22:33:31
提问者 陈立天 2020-03-20 22:29:41
问题已解决,确定采纳
还有疑问,暂不采纳

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

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

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

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

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

在线咨询

领取优惠

免费试听

领取大纲

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