Javascript 如何创建jQuery显示/隐藏密码函数

我试图在表单中为密码输入创建一个显示/隐藏按钮。一切都正常工作，只是我真的不知道如何将其转换为一个函数，以便将其应用于任何动态密码输入。主要的问题是，我不必在函数中添加任何元素，因为其他插件使用额外的文本输入和标签来检测输入密码的强度

$（文档）.ready（函数（）{
“使用严格”；//开始使用严格
如果（$（窗口）.width（）<700）{
$（'.password button main'）。在（'click'，function（）上{
$（“#传递”）.hide（）；
$（“#传递”）.show（）；
$（'.password button main>i'）.removeClass（'fa-eye-slash'）；
$（'.password button main>i'）.addClass（'fa-eye'）；
setTimeout（函数（）{
$（“#传递”）.show（）；
$（“#传递”）.hide（）；
$（'.password button main>i'）.addClass（'fa-eye-slash'）；
$（'.password button main>i'）.removeClass（'fa-eye'）；
}, 800);
});
$（'.password button verify'）。在（'click'，function（）上{
$（“#通过验证”）.hide（）；
$（“#通过验证”）.show（）；
$（'.password按钮verify>i'）.removeClass（'fa-eye-slash'）；
$（'.password按钮verify>i'）.addClass（'fa-eye'）；
setTimeout（函数（）{
$（“#通过验证”）.show（）；
$（“#通过验证”）.hide（）；
$（'.password按钮verify>i'）.addClass（'fa-eye-slash'）；
$（'.password按钮verify>i'）。removeClass（'fa-eye'）；
}, 800);
});
}否则{
$（'.password button main'）。在（'mousedown'，function（）上{
$（“#传递”）.hide（）；
$（“#传递”）.show（）；
$（'.password button main>i'）.removeClass（'fa-eye-slash'）；
$（'.password button main>i'）.addClass（'fa-eye'）；
});
$（'.password button main'）。在（'mouseup'，function（）上{
$（“#传递”）.show（）；
$（“#传递”）.hide（）；
$（'.password button main>i'）.addClass（'fa-eye-slash'）；
$（'.password button main>i'）.removeClass（'fa-eye'）；
});
$（'.password button main'）。在（'mouseout'，function（）上{
$（“#传递”）.show（）；
$（“#传递”）.hide（）；
$（'.password button main>i'）.addClass（'fa-eye-slash'）；
$（'.password button main>i'）.removeClass（'fa-eye'）；
});
$（'.password按钮verify'）。在（'mousedown'，function（）上{
$（“#通过验证”）.hide（）；
$（“#通过验证”）.show（）；
$（'.password按钮verify>i'）.removeClass（'fa-eye-slash'）；
$（'.password按钮verify>i'）.addClass（'fa-eye'）；
});
$（'.password button verify'）。在（'mouseup'，function（）上{
$（“#通过验证”）.show（）；
$（“#通过验证”）.hide（）；
$（'.password按钮verify>i'）.addClass（'fa-eye-slash'）；
$（'.password按钮verify>i'）。removeClass（'fa-eye'）；
});
$（'.password button verify'）。在（'mouseout'，function（）上{
$（“#通过验证”）.show（）；
$（“#pas验证关闭”）.hide（）；
$（'.password按钮verify>i'）.addClass（'fa-eye-slash'）；
$（'.password按钮verify>i'）。removeClass（'fa-eye'）；
});
}
$（“#传递”）.on（'focus'，function（）{
$（“#传递”）.keyup（函数（）{
$（'#pass off'）.val（$（this.val（））；
});
});
$（'#pass off'）。on（'focus'，function（）{
$（'#pass off'）.keyup（函数（）{
$（'#传递'）.val（$（this.val（））；
});
});
$（'#传递验证on'）。on（'focus'，function（）{
$（“#通过验证”）.keyup（函数（）{
$（'#通过验证'）.val（$（this.val（））；
});
});
$（“#通过验证”）.on（'focus'，function（）{
$（“#通过验证关闭”）.keyup（函数（）{
$（'#通过验证'）.val（$（this.val（））；
});
});
}); // 使用结束严格

/*
*表单输入样式
*/
.表格组{
位置：相对位置；
边缘底部：2rem；
}
.表单布局输入[type=“text”]，
.表单布局输入[type=“password”]，
.表单布局输入[type=“email”]{
/*字体大小：1.7rem；
高度：2.8雷姆*/
/*宽度：100%*/
填充：10px0；
高度：2.8雷姆；
字体大小：1.7rem；
字母间距：1px；
边界：无；
边框底部：1px实心#D3；
背景：透明；
大纲：无！重要；
盒影：无！重要；
边界半径：0；
}
：-webkit输入占位符{
不透明度：0！重要；
}
：-moz占位符{/*Firefox 18-*/
不透明度：0！重要；
}
：-moz占位符{/*Firefox19+*/
不透明度：0！重要；
}
：-ms输入占位符{
不透明度：0！重要；
}
.表格布局标签{
位置：绝对位置；
顶部：-10px；
左：0；
填充：10px0；
高度：2.5雷姆；
字体大小：1.7rem；
颜色：#6c757d；
字母间距：1px；
指针事件：无；
过渡：.5s；
}
.表单布局输入：焦点，
.表单布局输入：有效{
边框底部：1px实心#03a9f4；
}
.表单布局输入：焦点~标签，
.表单布局输入：有效~标签{
顶部：-1.5雷姆；
左：0；
颜色：#03a9f4；
字体大小：.8rem；
}
/*
*表单密码强度条
*/
.jquery-result-1{
边界半径：0；
}
/*
*窗体按钮样式
*/
.btn表格{
填充顶部：10px；
填充底部：13px；
字体大小：1.3rem；
颜色：#fff；
背景色：#47a447；
边界：无；
证明内容：中心；
对齐项目：居中；
显示器：flex；
宽度：100%；
过渡：0.3s；
边框左上半径：30px；
边框右下半径：30px；
大纲：无！重要；
光标：指针！重要；
}
.btn绿色{
背景色：#47a447；
}
.btn橙色{
背景色：#F451E；
}
.btn绿色：悬停{
背景色：#67b647；
}
.btn橙色：悬停{
背景色：#f0353c；
}
.btn文本{
左边距：5px；
}
/*
*密码显示/隐藏按钮
*/
.密码按钮{
背景颜色：浅灰色；
边界半径：0 4px 4px 0；
大纲：无；
光标：指针；
}
.密码按钮i{
填充：14px 19px；
颜色：暗灰色；
}
.密码按钮：悬停>i{
颜色：#3A3A；
}

您不需要有两个不同的输入并显示/隐藏它们-只需在
密码
和
文本
之间切换密码输入的
类型

（真的吗
function someName(someVariable) {
  // Copy and paste your code here!
}

<button onclick="toggleField(true, 'old')">Click me</button>

function toggleField(bool, type) {
  if (bool === true && type === 'old') {
    $(this).show();
  } else {
    $(this).hide();
  }   
}