这是我在做什么。
创建允许用户输入密码的模式
密码字段右侧将有一个按钮,可让您显示/隐藏该字段中的文本。
到目前为止,这就是我所拥有的。我的例子很完美。
http://jsfiddle.net/5wzs0njf/1/
这是我的html代码:
<div class="input-group col-md-8 col-md-offset-2">
<input type="password" class="form-control" id="password" placeholder="Password">
<span class="input-group-btn">
<button type="button" id="passwordButton" class="btn btn-primary">Show</button>
</span>
</div>
这是我的查询功能:
<script>
$(function () {
$(".form-control").each(function (index, input) {
var $input = $(input);
$("#passwordButton").click(function () {
var change = "";
if ($(this).html() === "Show") {
$(this).html("Hide");
change = "text";
} else {
$(this).html("Show");
change = "password";
}
var rep = $("<input type='" + change + "' />")
.attr("id", $input.attr("id"))
.attr("name", $input.attr("name"))
.attr('class', $input.attr('class'))
.val($input.val())
.insertBefore($input);
$input.remove();
$input = rep;
}).insertAfter($input);
});
});
</script>
但是,当我将jquery添加到底部的文件中时,我的按钮消失了。这就是它的外观(添加jquery之前的外观)
这就是它的样子。
我在做错什么我错过了吗?我试图将其格式化为一个非常易于阅读/理解的问题。
最佳答案
您的代码中存在功能错误。
在你的代码中
$("#passwordButton").click(function () {
var change = "";
.....
}).insertAfter($input);
您不需要此
insertAfter()
函数,因为您已经更改了按钮的名称。只需删除该功能为
$("#passwordButton").click(function () {
var change = "";
.....
});
现在您的代码必须正常工作。
关于javascript - 将JQuery添加到文件后未显示input-group-btn,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/32766331/