~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
开发工具与关键技术:.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" })
}
}
点击后效果: