使用addClass和removeClass完成内容切换

叁歲伎倆 2022-01-21 08:35 273阅读 0赞

作者：吱韩菌  
开发工具：Visual Studio 2015  
撰写时间：2019-6-5

今天要给大家展示的是使用addclass和removeclass在页面中完成内容切换。当点击“编辑”按钮时，从第一个table内容切换到第二的table内容。第二个table内容给它添加了d-none,是dispay：none的简写，是插件中封装的方法，它的作用是隐藏内容。  
![在这里插入图片描述][20190609113600359.png]

在js部分，首先要获取“编辑“按钮的ID cEdit，layer.alert(1314),当点击按钮时弹出提示框，则获取成功（这一步看似多余，但却是关键，假如不做这一步，后面代码写得再花里胡哨，没有获取到ID，都是做无用功）。成功获取ID后，就要给两个table加效果了，我们的目的是点击”编辑“按钮然后切换table内容，为了实现这个效果，我做的是执行点击事件的同时也执行它里面的两句代码，(cEditor1和cEditor2是两个table的ID) removeClass的作用是消除css类，而addClass则是添加类，下面两句代码可以理解为：消除隐藏table中的d-none的同时也给已经显示的table中添加隐藏属性d-none。$(this).text(“完成”);  
的作用是把“编辑“切换成”完成“  
$(“\#cEditor2”).removeClass(“d-none”);  
$(“\#cEditor1”).addClass(“d-none”);  
$(this).text(“完成”);

![在这里插入图片描述][20190609113609961.png]  
![在这里插入图片描述][20190609113618577.png]  
![在这里插入图片描述][20190609113626337.png]  
当js中的事件写完后就可以启动页面看效果，如上图，当点击编辑时切换内容，但这里只有一次效果，点击后虽然能切换table内容，但是无法切换回来，下面我们还需要做的功能是点击能够相互切换。在这里我为了实现这个效果，给它加了If判断。首先是给Text申明变量，通过if判断Text中的文本值是否等于“完成“，不等于”完成“时则执行if中的方法，否则就执行else。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0ODc3MA_size_16_color_FFFFFF_t_70]  
如果要多做几个这样的点击事件切换table内容，就要写多个点击事件和if判断，会增加代码量，为了减少代码量，接下来要给大家讲解下面的封装方法。  
![在这里插入图片描述][20190609113646670.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0ODc3MA_size_16_color_FFFFFF_t_70 1]  
![在这里插入图片描述][20190609113700443.png]  
![在这里插入图片描述][20190609113709344.png]

jk(“cEdit”, “cEditor1”, “cEditor2”);对应的是function jk(a,b,c)  
通过$(“\#”+a)调用每个编辑按钮的ID；b和c对应的就是两个table标签中的ID，这样封装，可以有效减少代码量，也可以继续添加相同类型的事件。

[20190609113600359.png]: /images/20220121/5a048e7822984fc9b470ca7f86e480f2.png
[20190609113609961.png]: /images/20220121/10391d12753240809239cf70974c26c0.png
[20190609113618577.png]: /images/20220121/16316484ad03468bbacda9a199f18a5b.png
[20190609113626337.png]: /images/20220121/1a76c4abee5449f393122019dc7a72c0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0ODc3MA_size_16_color_FFFFFF_t_70]: /images/20220121/ca723710c8224c1fa01e525a92099bab.png
[20190609113646670.png]: /images/20220121/8b24c4bb90264d4d80cf44be3565da7c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0ODc3MA_size_16_color_FFFFFF_t_70 1]: /images/20220121/f371d05cbc454727b9c8b50abb1791d4.png
[20190609113700443.png]: /images/20220121/a027508250d94e15819c715d26f508a6.png
[20190609113709344.png]: /images/20220121/6db08807e3414ccbb827b86e0acd2a40.png