如何使用 JQuery select 多个元素？

Question

我的 objective 正在制作一个切换密码可见性的功能。问题是在同一个文档中我有 3 个不同的输入，我还需要切换可见性功能，这些输入与密码无关。

我尝试使用 name 属性，但感觉过于复杂，因为我为每个图标都命名了并且 input.I 不知道使用什么来制作该功能，而且我知道必须有一个更简单的方法。

<i class="float-right fa fa-eye fa-lg" id="toggleVisibility"></i>
@Html.PasswordFor(m => m.Password, new { @class = "form-control", maxlength = 50 })

Answer 1

您可以在每个 fa-eye 元素上添加一个事件处理程序来切换其 next 元素的不透明度（如果它是 input。

并且您的 razor 扩展方法调用不会有任何更改。

$(".fa-eye").on("click", function(){
  let nextInput = $(this).next("input");
  let visibility = nextInput.css("opacity") == "1" ? 0 : 1;
  $(this).next("input").css("opacity", visibility)
})

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<i class="float-right fa fa-eye fa-lg" id="toggleVisibility"></i>
<input id="Password" name="Password" type="password" class="form-control" maxlength="50" value="" /><br>

<i class="float-right fa fa-eye fa-lg" id="toggleVisibility"></i>
<input id="Password2" name="Password2" type="password" class="form-control" maxlength="50" value="" /><br>

<i class="float-right fa fa-eye fa-lg" id="toggleVisibility"></i>
<input id="Password3" name="Password3" type="password" class="form-control" maxlength="50" value="" /><br>

编辑

今晚我很慢...我花了一些时间才弄清楚你想要什么，即使它很明显！快来看看吧！

$(".fa-eye").on("click", function(){
  let nextInput = $(this).next("input");
  let visibility = nextInput.attr("type") == "password" ? "text" : "password";
  nextInput.attr("type", visibility)
})

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<i class="float-right fa fa-eye fa-lg" id="toggleVisibility"></i>
<input id="Password" name="Password" type="password" class="form-control" maxlength="50" value="Abc_123" /><br>

<i class="float-right fa fa-eye fa-lg" id="toggleVisibility"></i>
<input id="Password2" name="Password2" type="password" class="form-control" maxlength="50" value="My_Password" /><br>

<i class="float-right fa fa-eye fa-lg" id="toggleVisibility"></i>
<input id="Password3" name="Password3" type="password" class="form-control" maxlength="50" value="Pr!vat3" /><br>

如何使用 JQuery select 多个元素？

How to select multiple elements with JQuery?

javascript

jquery

razor