博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
点击按钮添加和删除块
阅读量:5226 次
发布时间:2019-06-14

本文共 1766 字,大约阅读时间需要 5 分钟。

    点击按钮添加块

      

<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()

 

转载于:https://www.cnblogs.com/xdshi/p/9939563.html

你可能感兴趣的文章
C#通过DllImport引入dll中的C++非托管类(转)
查看>>
sparkSQL、dataframe
查看>>
h5+css 垂直导航菜单
查看>>
VMware12 + Ubuntu16.04 虚拟磁盘扩容
查看>>
pwershell switch 语句
查看>>
学习Spring Boot:(五)使用 devtools热部署
查看>>
三人行有我师?取长补短?影响力?
查看>>
设计模式——设计模式概述
查看>>
封装一个获取module.exports内容的方法
查看>>
动态连接库
查看>>
ServletContext 与application的异同
查看>>
水平垂直居中
查看>>
CSS3教程:border-image属性
查看>>
asp.netmvc常见功能链接
查看>>
sql server系统表详细说明
查看>>
[译] ASP.NET MVC 6 attribute routing – the [controller] and [action] tokens
查看>>
每日英语:Here's Why You Won't Finish This Article
查看>>
CentOS7 Failed to start LSB: Bring up/down
查看>>
安卓SQLite数据库
查看>>
第三天 额~~~没有什么太好写的
查看>>