这是我在做什么。


创建允许用户输入密码的模式
密码字段右侧将有一个按钮,可让您显示/隐藏该字段中的文本。


到目前为止,这就是我所拥有的。我的例子很完美。


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之前的外观)javascript - 将JQuery添加到文件后未显示input-group-btn-LMLPHP

这就是它的样子。

javascript - 将JQuery添加到文件后未显示input-group-btn-LMLPHP

我在做错什么我错过了吗?我试图将其格式化为一个非常易于阅读/理解的问题。

最佳答案

您的代码中存在功能错误。
在你的代码中

$("#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/

10-12 00:21
查看更多