首先去年我写过一篇一模一样的文章,那个时候在初步探索,所以写的代码有点累赘,没有想到封装这个层面,这段时间写的一个页面上有多个ip或多个mac的,用之前的方式要写好多代码,所以我封装了一个函数,在用到的页面调用就好了。
页面前端html页面请看:HTML中将ip地址写成输入,点的形式,将mac地址写成输入,冒号的形式,并进行前后端的数据交互,以及实现一些快捷的操作及输入的限制。_笑到世界都狼狈的博客-CSDN博客
接下来看一下我对js共用部分进行封装函数:
1.新建了一个叫ip_mac_formatEencapsulation.js的js文件,里面写的内容如下:
/**
* 点击详情页面时ip直接显示时调用
* @param inputParent四个小input框的父容器div的id或class
* @param option后台传给前台的ip值,例如${ safety.netmask}或$("#ip").val()
*/
function ipShowDiv(inputParent,option) {
var resultIp=option.split(".");
$(inputParent + ">.ip1").val(resultIp[0]);
$(inputParent + ">.ip2").val(resultIp[1]);
$(inputParent + ">.ip3").val(resultIp[2]);
$(inputParent + ">.ip4").val(resultIp[3]);
console.log('封装option',option)
console.log('封装$(inputParent + ">.ip1")',$(inputParent + ">.ip1").val())
}
/**
* 当ip发生变化时调用
* ip获取值封装
* @param inputParent四个小input框的父容器div的id
* @param inputHidden隐藏起来的input的id,用来将四个input中的值合并添加到隐藏input中传给后台
*/
function ipChange(inputParent,inputHidden){
var ip1,ip2,ip3,ip4;
// $("#" + inputParent + ">.ip1").val()这样写的话,调用的时候不用参数不用加#,但是父容器必须有id,不是很灵活
if ($(inputParent + ">.ip1").val() == ''){
ip1 = '';
} else {
ip1 = $(inputParent + ">.ip1").val() + '.';
}
if ($(inputParent + ">.ip2").val() == ''){
ip2 = '';
} else {
ip2 = $(inputParent + ">.ip2").val() + '.';
}
if ($(inputParent + ">.ip3").val() == ''){
ip3 = '';
} else {
ip3 = $(inputParent + ">.ip3").val() + '.';
}
if ($(inputParent + ">.ip4").val() == ''){
ip4 = '';
} else {
ip4 = $(inputParent + ">.ip4").val();
}
var ipp = ip1 + ip2 + ip3 + ip4;
$(inputHidden).val(ipp);
console.log('封装ipp',ipp);
console.log("封装$(inputHidden).val()", $(inputHidden).val())
}
// ipShowDiv("#ipVal","${ safety.ip}");
// ipChange("#ipVal","#netmask");
/**
* 点击详情页面时mac直接显示时调用
* @param inputParent六个小input框的父容器div的id或class
* @param option后台传给前台的ip值,例如${ safety.netmask}或$("#mac").val()
*/
function macShowDiv(inputParent,option) {
var resultMac=option.split(":");
$(inputParent + ">.mac1").val(resultMac[0]);
$(inputParent + ">.mac2").val(resultMac[1]);
$(inputParent + ">.mac3").val(resultMac[2]);
$(inputParent + ">.mac4").val(resultMac[3]);
$(inputParent + ">.mac5").val(resultMac[4]);
$(inputParent + ">.mac6").val(resultMac[5]);
console.log('封装mac--option',option)
console.log('封装mac--$(inputParent + ">.ip1")',$(inputParent + ">.ip1").val())
}
/**
* 当mac发生变化时调用
* mac获取值封装
* @param inputParent六个小input框的父容器div的id
* @param inputHidden隐藏起来的input的id,用来将四个input中的值合并添加到隐藏input中传给后台
*/
function macChange(inputParent,inputHidden){
var mac1,mac2,mac3,mac4,mac5,mac6;
if ($(inputParent + ">.mac1").val() == ''){
mac1 = '';
} else {
mac1 = $(inputParent + ">.mac1").val() + ':';
}
if ($(inputParent + ">.mac2").val() == ''){
mac2 = '';
} else {
mac2 = $(inputParent + ">.mac2").val() + ':';
}
if ($(inputParent + ">.mac3").val() == ''){
mac3 = '';
} else{
mac3 = $(inputParent + ">.mac3").val() + ':';
}
if ($(inputParent + ">.mac4").val() == ''){
mac4 = '';
} else {
mac4 = $(inputParent + ">.mac4").val() + ':';
}
if ($(inputParent + ">.mac5").val() == ''){
mac5 = '';
} else {
mac5 = $(inputParent + ">.mac5").val() + ':';
}
if ($(inputParent + ">.mac6").val() == ''){
mac6 = '';
} else{
mac6 = $(inputParent + ">.mac6").val();
}
var macc = mac1+ mac2 + mac3 + mac4 + mac5 + mac6;
$(inputHidden).val(macc);
console.log('封装mac',macc);
console.log("封装nac--$(inputHidden).val()", $(inputHidden).val())
}
2.在要用的页面调用:
2.1在html或jsp页面导入刚刚新建的js页面(要确保导入js文件在函数调用的上方)
调用ip显示/回显:
ipShowDiv("#ipVal","${ safety.netmask}");
// ipShowDiv("#ipVal",$("#ip").val());
// 上述"#ipVal"指的是包裹四个input的div的id,当然如果你是class,可以通过".ipVal"调用即可;
// 后面的"${ safety.netmask}"/$("#ip").val()是你能拿到要显示在4个input的ip值
修改ip,既ip发生变化时要传给后台时,获取ip的值:
ipChange("#ipVal","#ip");
// 上述"#ipVal"指的是包裹四个input的div的id,当然如果你是class,可以通过".ipVal"调用即可;
// 后面的"#ip"是你写在div以为的一个隐藏的input,用于将拼接好的数据传给input,在传给后台
至于mac的调用,和ip是一样的,调用对应函数就好了。。。