Jquery下面工作正常,但我怎样才能缩短这个Jquery?我必须显示和隐藏密码和确认密码的密码? https://jsfiddle.net/c5cvLo54/1/
CREATE VIEW estadistica
AS
SELECT id AS letra, COUNT(*) AS estadistica
FROM tabla1
GROUP BY id
答案 0 :(得分:2)
你只能用一个按钮来控制。
```
$('.showOrHide').click(function(e){
var target = e.currentTarget
$(target).hasClass('show')?hidePassword($(target)):showPassword($(target))
})
function hidePassword(e){
e.removeClass('show').addClass('hide')
e.prev('input').attr('type','password')
}
function showPassword(e){
e.removeClass('hide').addClass('show')
e.prev('input').attr('type','text')
}
HTML:
```
<input type="text" value="123456">
<button class="showOrHide show">click</button>
```
式:
```
.show{
/*css you want */
color: blue
}
.hide{
/*css you want */
color: red
}
```
答案 1 :(得分:1)
我基本上是通过参考 Google 在其登录表单上的显示密码切换来创建的。
这基本上是检查复选框是否被选中。
如果选中,则会将密码的输入类型更改为文本,反之亦然。
<!-- Toggle password visibility -->
$(document).ready(function() {
$("#show-password").change(function(){
$(this).prop("checked") ? $("#upassword").prop("type", "text") : $("#upassword").prop("type", "password");
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="password" name="password" id="upassword" />
<input type="checkbox" id="show-password">
<label for="show-password">Show Password
答案 2 :(得分:0)
以下是一种方法,如何缩短代码:
$(document).ready(function() {
$(".show-password, .hide-password").on('click', function() {
var passwordId = $(this).parents('li:first').find('input').attr('id');
if ($(this).hasClass('show-password')) {
$("#" + passwordId).attr("type", "text");
$(this).parent().find(".show-password").hide();
$(this).parent().find(".hide-password").show();
} else {
$("#" + passwordId).attr("type", "password");
$(this).parent().find(".hide-password").hide();
$(this).parent().find(".show-password").show();
}
});
});
&#13;
li {
list-style: none
}
.hide-password {
display: none
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>
<input type="password" name="password" id="password" />
<span class="password-showhide">
<span class="show-password">Show</span>
<span class="hide-password">hide</span>
</span>
<li>
<li>
<input type="password" name="password" id="confirmPassword" />
<span class="confirm-password-showhide">
<span class="show-password">Show</span>
<span class="hide-password">hide</span>
</span>
<li>
</ul>
&#13;
答案 3 :(得分:0)
这是我认为你能得到的最短的
$(".confirm-password-showhide .trigger-password, .password-showhide .trigger-password").click(function() {
var c = $(this).parent().attr("class").replace("-showhide", "");
var obj = $("#" + (c.indexOf("confirm") > -1 ? "confirmPassword" : "password"));
obj.attr("type", obj.attr("type") == "text" ? "password" : "text");
$(this).text($(this).text() == "hide" ? "show" : "hide");
});
我还删除了每个密码的“隐藏”范围。
$(".confirm-password-showhide .trigger-password, .password-showhide .trigger-password").click(function() {
var c = $(this).parent().attr("class").replace("-showhide", "");
var obj = $("#" + (c.indexOf("confirm") > -1 ? "confirmPassword" : "password"));
obj.attr("type", obj.attr("type") == "text" ? "password" : "text");
$(this).text($(this).text() == "hide" ? "show" : "hide");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li><input type="password" name="password" id="password"> <span class="password-showhide"><span class="trigger-password">Show</span></span>
</li>
<li><input type="password" name="password" id="confirmPassword"> <span class="confirm-password-showhide"><span class="trigger-password">Show</span></span>
</li>
</ul>
答案 4 :(得分:0)
显示/隐藏密码功能
function togglePassword($element){
var newtype=$element.prop('type')=='password'?'text':'password';
$element.prop('type',newtype);
}
$(document).ready(function() {
$('#showUserNewPass').change(function(){
togglePassword($('#userNewPass'));
togglePassword($('#confirmNewPassword'));
});
});
答案 5 :(得分:0)
<html>
<head>
<title>This Password Hide & Show</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
#password
{
width: 50%;
}
#open
{
color: gray;
}
#closed
{
display: none;
color: steelblue;
}
i
{
position: absolute;
margin-top: -30px;
margin-left: 280px;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$("#open").click(function(){
$("#open").hide();
$("#closed").show();
$("#password").attr("type","text");
});
$("#closed").click(function(){
$("#closed").hide();
$("#open").show();
$("#password").attr("type","password");
});
});
</script>
</head>
<body>
<h4>Password Hide & Show</h4>
<input class="form-control" type="password" placeholder="Password" id="password" name="pwd">
<i id="open" class="fa fa-eye fa-2x"></i>
<i id="closed" class="fa fa-eye-slash fa-2x"></i>
</body>
</html>
答案 6 :(得分:0)
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="container">
<div class="row">
<div class="col-md-offset-3 col-md-6">
<h2>Show or Hide Password</h2>
<p class="instructions">Hover on the eye to show/hide the password</p>
<div class="input-group">
<input id="password" type="password" class="form-control" placeholder="password">
<span class="input-group-btn">
<button id="show_password" class="btn btn-secondary" type="button">
<span class="glyphicon glyphicon-eye-open"></span>
</button>
</span>
</div>
</div>
</div>
</div>
<script>
$("#show_password").hover(
function functionName() {
//Change the attribute to text
$("#password").attr("type", "text");
$(".glyphicon").removeClass("glyphicon-eye-open").addClass("glyphicon-eye-close");
},
function () {
//Change the attribute back to password
$("#password").attr("type", "password");
$(".glyphicon").removeClass("glyphicon-eye-close").addClass("glyphicon-eye-open");
}
);
</script>
答案 7 :(得分:-2)
<script>
$(document).ready(function(){
$('#btn').click(function(){
var paswd= $('#password');
if(paswd.attr("type")== "password"){
paswd.attr("type","text");
$('#btn').attr("value","hide");
}
else{
paswd.attr("type","password");
$('#btn').attr("value","show");
}
})
});
</script>