我有一个 Javascript 函数,该函数运行一次(通过调用 id
)。我尝试将该函数转换为 jQuery,以允许该函数适用于 pwd
的每个实例。
如何让 jQuery 代码像 JS 代码一样工作,但为 pwd
的每个实例运行?
$(".pass").on("click", ".typcn-eye", function() {
var pwd = $(this).closest(".pwd");
function togglePass() {
$(this).toggleClass("active");
pwd.type == "password" ? (pwd.type = "text") : (pwd.type = "password");
}
});
var pwd = document.getElementById('pwd');
var eye = document.getElementById('eye');
eye.addEventListener('click', togglePass);
function togglePass() {
eye.classList.toggle('active');
(pwd.type == 'password') ? pwd.type = 'text': pwd.type = 'password';
}
.box {
display: flex;
flex-direction: column;
align-items: start;
}
.pass {
display: flex;
align-items: center;
border: 1px solid;
}
.box input[type="text"],
.box input[type="password"] {
display: block;
margin: 20px auto;
background: #ececec;
border: 0;
border-radius: 5px;
padding: 14px 10px;
width: 220px;
outline: none;
color: #565f79;
}
.typcn {
color: #3b476b;
font-size: 22px;
cursor: pointer;
}
.typcn.active {
color: #7f60eb;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/typicons/2.0.9/typicons.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="box">
<div class="pass">
<input class="pwd" type="password" name="password" placeholder="Passsword" id="pwd" autocomplete="off">
<i class="typcn typcn-eye" id="eye"></i>
</div>
<div class="pass">
<input class="pwd" type="password" name="password" placeholder="Passsword" id="pwd2" autocomplete="off">
<i class="typcn typcn-eye" id="eye2"></i>
</div>
</form>
最佳答案
在点击事件中的 jQuery 版本中,您有函数togglePass(),但您从未触发它。因为你在其他版本中这样做了。
// For triggering you function
$(".pass").on("click", ".typcn-eye", togglePass);
// Function outside your click event
function togglePass() {
// Toggle active class on every click
$(this).toggleClass("active");
// Get the type of the prev element
let type = $(this).prev().attr("type"),
changeTo = type === "password" ? "text" : "password";
// Change type attr of that element
$(this).prev().attr("type", changeTo);
}
.box {
display: flex;
flex-direction: column;
align-items: start;
}
.pass {
display: flex;
align-items: center;
border: 1px solid;
}
.box input[type="text"],
.box input[type="password"] {
display: block;
margin: 20px auto;
background: #ececec;
border: 0;
border-radius: 5px;
padding: 14px 10px;
width: 220px;
outline: none;
color: #565f79;
}
.typcn {
color: #3b476b;
font-size: 22px;
cursor: pointer;
}
.typcn.active {
color: #7f60eb;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/typicons/2.0.9/typicons.min.css" rel="stylesheet" />
<form class="box">
<div class="pass">
<input class="pwd" type="password" name="password" placeholder="Passsword" id="pwd" autocomplete="off">
<i class="typcn typcn-eye" id="eye"></i>
</div>
<div class="pass">
<input class="pwd" type="password" name="password" placeholder="Passsword" id="pwd2" autocomplete="off">
<i class="typcn typcn-eye" id="eye2"></i>
</div>
</form>
关于javascript - 将 JS 转换为 jQuery 多个实例的点击函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54205473/