Как изменить класс встроенного элемента span в функции javascript?

Question

Я пытаюсь реализовать текстовое поле для пароля, которое имеет значок глаза (css class-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 fa-eye-slash.Классы fa-eye и fa-eye-slash присутствуют в файле css.но я не уверен, как изменить класс, поскольку он находится внутри элемента span.

Может кто-нибудь, пожалуйста, помогите мне с этим.

Answer 1

Плз попробуйте следующий код, он должен изменить ваши классы CSS вашего -tag.

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>

Answer 2

Спасибо всем.Я решил это, написав приведенную ниже новую функцию 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>

Answer 3

Вот пример того, что вы хотите.(из скрипки)

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