项目问题总结（一）

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

开发工具与关键技术：.prop()属性

作者：张海锋

撰写时间：2019/6/14

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

在我们做项目的过程中，会遇到很多的问题。而我们如何去处理这些问题呢？这

时我们有的人就会上百度或者去请教别人。而我也不例外，在做项目的过程中遇到了

一个小问题，我呢？是通过上网查找的资料去解决的，下面我就说一下如何解决这个

问题的。

   首先，我说一下这个功能，就是点击一个添加按钮，然后就添加一个航段信息，并

且单选框，从单程跳到多程，如下图所示：

一开始做这个功能的时候，只是添加了航段信息，但单选框并没有跳转，然后上网查找，

找到了一个用.attr（）属性的，但这个属性虽然跳了，但点击删除的时候，它并不会跳转

回去，之后我又上网查资料，终于我找到了用.prop()属性把这个功能给做出来了。

代码：

   var ArrLetter = new Array("test1", "test2", "test3", "test4");

            var depar = new Array("departcityone","departcitytwo","departcitythree","departcityfour");

            var arrive = new Array("arrivecityone", "arrivecitytwo", "arrivecitythree", "arrivecityfour");

            if (optionCount < 5) {

                var str = '<div class="form-row mb-2">'+

                                '<label class="col-sm-1 col-form-label text-center">出发城市</label>'+

                                '<div class="col-sm-3 px-0">'+

                                    '<input type="text" class="form-control" id="' + depar[optionCount] + '" placeholder="请选择出发城市" />' +

                                '</div>'+

                                '<label class="col-sm-1 col-form-label text-center">到达城市</label>'+

                                '<div class="col-sm-3 px-0">'+

                                    '<input type="text" class="form-control" id="' + arrive[optionCount] + '" placeholder="请选择到达城市" />' +

                                '</div>'+

                                '<label class="col-sm-1 col-form-label text-center">出发日期</label>'+

                                '<div class="col-sm-2 px-0">'+

                                    '<input type="text" class="layui-input" placeholder="请选择出发时间" id="' + ArrLetter[optionCount] + '">' +

                               '</div>'+

                                '<div class="col-sm-1 pl-5">'+

                                    '<a href="#" class="layui-icon layui-icon-close" style="font-size:37px;color: red;text-decoration:none;"      οnclick="deletebtn()"></a>'+

                                '</div>'+

                            '</div>'

                $("#formTitleInfors").append(str);

                    if (optionCount > 1) {//联程

                        $("#option3").prop("checked", "checked");

                        $("#option1").removeAttr("checked");

                    } else {//来回程

                        if (optionCount == 1) {

                            $("#option2").prop("checked", "checked");

                            $("#option1").removeAttr("checked");

                        } else {//单程

                            $("#option1").prop("checked", "checked");

                            $("#option2").removeAttr("checked");

                        }

                    }

            } else {

                layer.msg("已经是最后一个选项了，不能再添加选项了", { icon: 0, skin: "layui-layer-molv" })

            }

        }

点击后效果：