[英]How to select multiple elements with JQuery?
我的目标是制作 function 来切换密码可见性。 问题是在同一个文档中我有 3 个不同的输入,我还需要切换可见性 function,但这些输入与密码无关。
我尝试使用名称属性,但感觉过于复杂,因为我为每个图标和输入命名。我不知道用什么来制作 function,我知道必须有更简单的方法。
<i class="float-right fa fa-eye fa-lg" id="toggleVisibility"></i>
@Html.PasswordFor(m => m.Password, new { @class = "form-control", maxlength = 50 })
您可以在每个fa-eye
元素上添加一个事件处理程序,以切换其下一个元素(如果它是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>
您可以使用 class 来匹配每个输入。 将 class 添加到要隐藏/显示的每个输入。 然后处理点击事件并切换可见性:
<i class="float-right fa fa-eye fa-lg" id="toggleVisibility"></i>
// add 'toggle-vis' class to each input
@Html.PasswordFor(m => m.Password, new { @class = "form-control toggle-vis", maxlength = 50 })
...
// jquery
$('#toggleVisibility').on('click', function() {
$('.toggle-vis').toggle();
})
$('#toggleVisibility').on('click', function() { $('.toggle-vis').toggle(); })
<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">Click to toggle</i><br/> <input type="text" class="toggle-vis" value="text"/> <br/> <input type="password" class="toggle-vis" value="pass" />
尝试在您的 js 文件中:
let input = $(select your input1)
let input2 = $(select your input2)
let input3 = $(select your input3)
function show_hide() {
input.toggle()
input2.toggle()
input3.toggle()
}
在你的活动中召唤它。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.