使用addClass和removeClass完成内容切换

使用addClass和removeClass完成内容切换

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

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

在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(“完成”);

当js中的事件写完后就可以启动页面看效果，如上图，当点击编辑时切换内容，但这里只有一次效果，点击后虽然能切换table内容，但是无法切换回来，下面我们还需要做的功能是点击能够相互切换。在这里我为了实现这个效果，给它加了If判断。首先是给Text申明变量，通过if判断Text中的文本值是否等于“完成“，不等于”完成“时则执行if中的方法，否则就执行else。

如果要多做几个这样的点击事件切换table内容，就要写多个点击事件和if判断，会增加代码量，为了减少代码量，接下来要给大家讲解下面的封装方法。

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