首页脚本

在首页的时候我们需要做的事情是，选择了快递公司和输入了快递单号之后，点击确认，调整到详情页。

绑定确认按钮的点击事件，当点击确认按钮时候触发逻辑步骤如下：

阻止浏览器默认提交行为
获取选择快递控件的select元素的输入值
获取输入快递控件的input元素的输入值
判断是否都有值
如果其中一个没有，显示错误提示
如果都有，使用获取到的值拼接出跳转的地址字符串
使用 location.href 伴随着参数跳转到详情页

绑定选择和输入控件，当点击时候出发以下逻辑

寻找当前元素的下一个节点(错误提示)，隐藏。

$(function(){
    let indexPage = {
        init:function(){
            this.bind();
        },
        bind:function(){
            // 绑定确认按钮的点击事件
            $('#submit').on('click',this.submitEvent);
            // 绑定选择和输入控件事件
            $('.form-item-input').on('click',this.cleanError);
            $('.form-item-select').on('click',this.cleanError);
        },
        // 清除错误提示
        cleanError:function(){
            // 此处 this 为被点击的控件元素
            // 寻找当前节点的下一个节点，隐藏。
            $(this).next().hide();
        },
        submitEvent:function(e){
            // 阻止浏览器默认提交行为，form表单会有一个默认提交动作
            e.preventDefault();

            // 获取选择和输入控件元素的值
            let order_id = $('.form-item-input').val();
            let company  = $('.form-item-select').val();

            // 如果输入控件的值为空
            if(!order_id){
                // 显示该控件下的错误提示节点
                $('.form-item-input').next().show();
            }
            // 如果选择控件的值为空
            if(!company){
                // 显示该控件下的错误提示节点
                $('.form-item-select').next().show();
            }
            // 如果他们两个输入控件中有其中一个为空，函数返回结束运行。
            if(!order_id || !company){
                return
            }

            // 拼接跳转的URL详情页地址
            let url = `./detail.html?company=${company}&order_id=${order_id}`;
            // 跳转到详情页
            location.href = url;
        }
    }

    indexPage.init();
})

# 首页脚本

首页脚本