javascript - 将 JS 转换为 jQuery 多个实例的点击函数

标签 javascript jquery

我有一个 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/

相关文章:

javascript - 覆盖 Chrome 中的功能键默认操作

jquery - 更改 OG :IMAGE with jQuery click 的值

javascript - 是否可以使用 css/js 将带有滚动条的元素自动边距元素设置为相同位置?

Javascript:文件构造函数的参数 1 无法转换为序列

javascript - 如何将 javascript 对象属性链接到同一对象的另一个属性?

javascript - 如何使用 jOrgChart 在 HTML 文件中创建图表?

javascript - 尝试在 Magento 中使用 Google map 方向时出错(未捕获的 ReferenceError : google is not defined)

jquery - jqGrid双分页(客户端和服务器端)

javascript - 如何在 javascript 中修复 "Cannot read property ' 的 null 子项...“错误

javascript onload 在 while