blocks|key|4027620|text|这里有一个你想要的例子。(来自codepen小提琴)|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4027621|​|4027622|$(".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");
++}
});|code-block|syntax|javascript|4027623|.panel+{
++margin:+20px;
}

.field-icon+{
++float:+right;
++margin-left:+-25px;
++margin-top:+-25px;
++margin-right:+10px;
++position:+relative;
++z-index:+2;
}|4027624|<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>|4027625|4027626|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Q|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|R|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|K|3|L|5|F|7|T|8|@]|9|@]|A|$G|H]]|$1|M|3|C|5|6|7|U|8|@]|9|@]|A|$]]|$1|N|3|-4|5|6|7|V|8|@]|9|@]|A|$]]]|O|$]]

<p>Here is an example of what you want. (from a codepen fiddle)</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>$(".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");
  }
});</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>.panel {
  margin: 20px;
}

.field-icon {
  float: right;
  margin-left: -25px;
  margin-top: -25px;
  margin-right: 10px;
  position: relative;
  z-index: 2;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/&gt;
&lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/&gt;
&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;

&lt;div class="panel panel-default"&gt;
  &lt;div class="panel-body"&gt;
    &lt;form class="form-horizontal" method="" action=""&gt;
      &lt;div class="form-group"&gt;
        &lt;label class="col-md-4 control-label"&gt;Password&lt;/label&gt;
        &lt;div class="col-md-6"&gt;
          &lt;input id="password-field" type="password" class="form-control" name="password" value="mypassword"&gt;
          &lt;span toggle="#password-field" class="fa fa-fw fa-eye field-icon toggle-password"&gt;&lt;/span&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/form&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>


blocks|key|4025781|text|请尝试下面的代码，它应该会改变你的-tag的css类。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4025782|​|4025783|function+hasClass(el,+className)
{
++++if+(el.classList)
++++++++return+el.classList.contains(className);
++++return+!!el.className.match(new+RegExp('(\\s%7C%5E)'+%2B+className+%2B+'(\\s%7C$)'));
}

function+addClass(el,+className)
{
++++if+(el.classList)
++++++++el.classList.add(className)
++++else+if+(!hasClass(el,+className))
++++++++el.className+%2B=+"+"+%2B+className;
}

function+removeClass(el,+className)
{
++++if+(el.classList)
++++++++el.classList.remove(className)
++++else+if+(hasClass(el,+className))
++++{
++++++++var+reg+=+new+RegExp('(\\s%7C%5E)'+%2B+className+%2B+'(\\s%7C$)');
++++++++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%2B%2B){
			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%2B%2B){
			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");
			}
		}
	}+
}|code-block|syntax|javascript|4025784|4025785|4025786|<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>|4025787|4025788|entityMap^0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Q|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|R|8|@]|9|@]|A|$G|H]]|$1|I|3|C|5|6|7|S|8|@]|9|@]|A|$]]|$1|J|3|C|5|6|7|T|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|U|8|@]|9|@]|A|$G|H]]|$1|M|3|C|5|6|7|V|8|@]|9|@]|A|$]]|$1|N|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|O|$]]

<p>Plz try the following code, it should change your css classes of your -tag.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>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 &lt; iconObj.children.length; i++){
			if(iconObj.children[i]!=null &amp;&amp; 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 &lt; iconObj.children.length; i++){
			if(iconObj.children[i]!=null &amp;&amp; hasClass(iconObj.children[i], "fa-eye-slash")){
				removeClass(iconObj.children[i], "fa-eye-slash");
				addClass(iconObj.children[i], "fa-eye");
			}
		}
	} 
}</code></pre>
</div>
</div>
</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="input-group show-hide-password"&gt;
      &lt;form:password id="form-control" path="password" class="form-control" required="" /&gt;
       &lt;div class="input-group-append"&gt;
         &lt;span id="PassSpan" class="input-group-text" onclick="typeChange('form- 
         control','PassSpan')"&gt;
          &lt;i class="fa fa-eye"  aria-hidden="true"&gt;&lt;/i&gt; 
         &lt;/span&gt;
       &lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>


blocks|key|4025827|text|谢谢你们所有人。我通过编写下面的新js函数解决了这个问题，并在onclick中调用它|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4025828|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";+

+}
+}|code-block|syntax|javascript|4025829|JSP|4025830|<i+class="fa+fa-eye"+id+="passi"+aria-hidden="true"+onclick="typeChange('form-control',this)"></i>|4025831|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>Thank you all. I resolved it by writing the below new js function and i am invoking it onclick </p>

<pre><code>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"; 

 }
 }
</code></pre>

<p>JSP</p>

<pre><code>&lt;i class="fa fa-eye" id ="passi" aria-hidden="true" onclick="typeChange('form-control',this)"&gt;&lt;/i&gt;
</code></pre>


<p>I am trying to implement text box for password which has a eye icon( css class- fa fa-eye). when user click on the eye icon it changes to eye slash icon and input type to text.</p>

<pre><code>&lt;div class="input-group show-hide-password"&gt;
      &lt;form:password id="form-control" path="password" class="form-control" required="" /&gt;
       &lt;div class="input-group-append"&gt;
         &lt;span id="PassSpan" class="input-group-text" onclick="typeChange('form- 
         control','PassSpan')"&gt;
          &lt;i class="fa fa-eye"  aria-hidden="true"&gt;&lt;/i&gt; 
         &lt;/span&gt;
       &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>Js file </p>

<pre><code>function typeChange(controlId, spanId) { 
     var x =  document.getElementById(controlId);        
     if (x.type === "password")
     { x.type = "text";         
     } 
     else { 
         x.type = "password";           
         } 
 }
</code></pre>

<p>this function only changes the input type but i am not able to change the  class to fa fa-eye-slash. fa-eye and fa-eye-slash classes are present on css file. but I am not sure how to change the class of  as it is inside span element.</p>

<p>Can someone please help me with that. </p>


How to change class of span inline element in javascript function?

我正在尝试实现密码的文本框有一个眼睛图标( css类- fa- eye )。当用户单击眼睛图标时，它会变成眼睛斜杠图标，并输入文本类型。<div class="input-group show-hide-password">      <form:password id="form-control" path="pas...

问如何在javascript函数中改变span内联元素的类？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在javascript函数中改变span内联元素的类？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在javascript函数中改变span内联元素的类？
EN