如何在javascript函数中更改span内联元素的类?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (129)

我正在尝试实现密码的文本框,它有一个眼睛图标(css class-fa 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。fa-eye和fa-eye-slash类存在于css文件中。但我不知道如何更改span元素中的类。

提问于
用户回答回答于

请尝试以下代码,应该会更改标记的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>

用户回答回答于

这是你想要的一个例子

$(".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>

扫码关注云+社区

领取腾讯云代金券