如何在javascript函数中改变span内联元素的类？
如何在javascript函数中改变span内联元素的类？
提问于 2018-10-08 02:45:19
我正在尝试实现密码的文本框有一个眼睛图标( css类- fa- eye )。当用户单击眼睛图标时，它会变成眼睛斜杠图标，并输入文本类型。
<div class="input-group show-hide-password">
<form:password id="form-control" path="password" class="form-control" required="" />
<div class="input-group-append">
<span id="PassSpan" class="input-group-text" onclick="typeChange('form-
control','PassSpan')">
<i class="fa fa-eye" aria-hidden="true"></i>
</span>
</div>
</div>Js文件
function typeChange(controlId, spanId) {
var x = document.getElementById(controlId);
if (x.type === "password")
{ x.type = "text";
}
else {
x.type = "password";
}
}此函数仅更改输入类型，但我无法将类更改为fa -eye slash。在css文件中有fa-eye和fa-eye slash类。但我不确定如何更改的类，因为它在span元素中。
谁能帮帮我。
回答 3
Stack Overflow用户
发布于 2018-10-08 02:53:42
这里有一个你想要的例子。(来自codepen小提琴)
$(".toggle-password").click(function() {
$(this).toggleClass("fa-eye fa-eye-slash");
var input = $($(this).attr("toggle"));
if (input.attr("type") == "password") {
input.attr("type", "text");
} else {
input.attr("type", "password");
}
});.panel {
margin: 20px;
}
.field-icon {
float: right;
margin-left: -25px;
margin-top: -25px;
margin-right: 10px;
position: relative;
z-index: 2;
}<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel panel-default">
<div class="panel-body">
<form class="form-horizontal" method="" action="">
<div class="form-group">
<label class="col-md-4 control-label">Password</label>
<div class="col-md-6">
<input id="password-field" type="password" class="form-control" name="password" value="mypassword">
<span toggle="#password-field" class="fa fa-fw fa-eye field-icon toggle-password"></span>
</div>
</div>
</form>
</div>
</div>
Stack Overflow用户
发布于 2018-10-09 21:58:42
谢谢你们所有人。我通过编写下面的新js函数解决了这个问题，并在onclick中调用它
function typeChange(controlId, spanId) {
var x = document.getElementById(controlId);
if ( spanId.classList.contains('fa-eye') ){
spanId.classList.toggle('fa-eye-slash');
}
if (x.type === "password")
{ x.type = "text";
}
else {
x.type = "password";
}
}JSP
<i class="fa fa-eye" id ="passi" aria-hidden="true" onclick="typeChange('form-control',this)"></i>Stack Overflow用户
发布于 2018-10-08 05:20:36
请尝试下面的代码，它应该会改变你的-tag的css类。
function hasClass(el, className)
{
if (el.classList)
return el.classList.contains(className);
return !!el.className.match(new RegExp('(\\s|^)' + className + '(\\s|$)'));
}
function addClass(el, className)
{
if (el.classList)
el.classList.add(className)
else if (!hasClass(el, className))
el.className += " " + className;
}
function removeClass(el, className)
{
if (el.classList)
el.classList.remove(className)
else if (hasClass(el, className))
{
var reg = new RegExp('(\\s|^)' + className + '(\\s|$)');
el.className = el.className.replace(reg, ' ');
}
}
function typeChange(controlId, spanId) {
console.info(spanId);
var x = document.getElementById(controlId);
var iconObj = document.getElementById(spanId);
if (x.type === "password"){
x.type = "text";
for(var i = 0; i < iconObj.children.length; i++){
if(iconObj.children[i]!=null && hasClass(iconObj.children[i], "fa-eye")){
removeClass(iconObj.children[i], "fa-eye");
addClass(iconObj.children[i], "fa-eye-slash");
}
}
} else {
x.type = "password";
for(var i = 0; i < iconObj.children.length; i++){
if(iconObj.children[i]!=null && hasClass(iconObj.children[i], "fa-eye-slash")){
removeClass(iconObj.children[i], "fa-eye-slash");
addClass(iconObj.children[i], "fa-eye");
}
}
}
}
<div class="input-group show-hide-password">
<form:password id="form-control" path="password" class="form-control" required="" />
<div class="input-group-append">
<span id="PassSpan" class="input-group-text" onclick="typeChange('form-
control','PassSpan')">
<i class="fa fa-eye" aria-hidden="true"></i>
</span>
</div>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52691724
复制相关文章
相似问题