起因
本人是在一家互联金融公司,因项目需求 要实现如上图的效果 从网上查阅了很多资料 ,无果而终,最终想到了 动态更改id 避免id重复 调用失败
保守派 --- 行内调用
付息日期 :
增加
第1次付息日期 :
切记 要引入 laydate.js 这里用到的是独立版本的 具体用法 可以参照官网文档
//付息日期
fuxiTime();
function fuxiTime() {
if(!$(".fuxiTime .caozuo_btn")) return;
var i = 2;
$("ul#fuxiTime_containt").delegate(".caozuo_btn", "click", function() {
var lis = "
" +"删除" +
"第" + i + "次付息日起 :" +
"
" +"
";if($(this).is(".caozuo_add")) {
$(this).parents("ul").append(lis);
i++;
};
if($(this).is(".caozuo_delete")) {
$(this).parent("li").remove();
};
})
}
开放现代写法
使用 layDate 独立版body{padding: 20px;}
.demo-input{padding-left: 10px; height: 38px; min-width: 262px; line-height: 38px; border: 1px solid #e6e6e6; background-color: #fff; border-radius: 2px;}
.demo-footer{padding: 50px 0; color: #999; font-size: 14px;}
.demo-footer a{padding: 0 5px; color: #01AAED;}
增加
// lay('#version').html('-v'+ laydate.v);
//执行一个laydate实例
laydate.render({
elem: '#add_time' //指定元素
});
var num = 2;
function addTime(){
$('.addTime'+(parseInt(num)-parseInt(1))).after(
"
"+
"添加"+num+"时间:"+
""+
""+
"增加"+
""
);
//执行一个laydate实例
laydate.render({
elem: '#add_time'+num //指定元素
});
num++;
}
关于 日期插件 样式说明
layDate 版本不同 样式也就不同 当然功能没有太大变化 所以说样式和CSS 没有很大的关联性。
结束
思路固然 重要 , 但是没有先人指路,也是虾扯淡!