点击按钮添加块
<form action="" id="repairmain" method="post">
<!-- 页面内容--> <div id="form"> <div class="repair_table" id="table"> <div><label class="name" name="name">维修手机:</label></div> <div class="mt20"><label class="unique_code" name="unique_code">故障类型:</label></div> <a onClick="closea(this)" class="btn btn-primary btn-lg active closex" role="button">关闭</a> </div> </div> <div class="weui-btn-area"> <a onClick="submit_order()" class="weui-btn weui-btn_primary">新增配件扫码</a> <a onClick="submit()" class="weui-btn weui-btn_primary btn_table">提交</a> </div> </form><script type="text/javascript">
//最开始模块次数为0 let count = 0; //声明变量用来保存拼接的模版 let model = `<div id="table"> <div><label class="name" id="id">维修手机:</label></div> <div class="mt20"><label class="unique_code">故障类型:</label></div> <a onClick="closea(this)" class="btn btn-primary btn-lg active closex" role="button">关闭</a> </div>` //触发新增事件 function submit_order(){ let control = count === 0 ? true : false if (control) { $("#table").css({"display": "block"}); count++; $(".btn_table").css({"display":"block"}); // console.log(count) } else { $("#form").append(model) // console.log(model) }};
//点击按钮关闭当前行事件
//这里主要记住传递参数 页面事件参数this为当前,这里传递一个this对应的参数,触发删除按钮时直接删除当前
function closea(r){
r.parentNode.remove(); }</script>
根据jquery教程对元素有如下操作:
jquery append()方法
apend() -在被选的元素的结尾插入内容
prepend() --在被选元素的开头插入内容
after() ---在被选元素之后插入内容
before() --在被选元素之前插入内容
Eg:
jQuery append()方法在被选元素的结尾插入内容
$("p").append("追加文本");
jQuery prepend()方法在被选元素的开头插入内容
$("p").prepend("在开头追加文本");
在被选元素之后插入内容
$("img").after("在后面添加文本");
$("img").before("在前面添加文本");
1.隐藏当前元素
$(this).hide();
2.隐藏所有<p>元素
$("p").hide();
3.隐藏所有chass="test"的<p>元素
$("p.test").hide();
4.隐藏所有di="test"的元素
$("#test").hide()