在使用jquery将值从一个输入传递到另一个输入时遇到麻烦

Having trouble passing a value from one input to another with jquery

本文关键字：输入 一个 另一个 麻烦 遇到 jquery      更新时间：2023-09-26

我正在做一个新手项目，做一个简单的"待办事项清单"，我被一些看起来很简单的事情卡住了!我试着把main从#myInput传到上传到下一个，以此类推。现在，如果你输入一些东西，然后点击添加，它首先会因为某种原因创建一个空白的新行，然后如果你输入其他东西，点击添加，你之前输入的东西会显示在下一行。只要你在输入中输入不同的东西，它就会一直这样做，但如果你在输入中输入相同的东西，连续点击几次add，什么都不会显示。然后再次将输入更改为不同的内容，并单击添加，所有这些都会显示lol，但仍然没有从您输入的当前行输出…坚果。有什么好的建议吗?我留下了一个JSfiddle链接，看看下面到底发生了什么。

<div>
  <form id="addThings" type="text">
    <input type="text" id="myInput" placeholder="add to your to-do list" size="50" maxlength="40" autocomplete="off" autofocus>
    <input type="button" id="addButton" value="add">
  </form>
</div>

另外，当你点击按钮时，它会在下面创建一个新行，它会把周围的一切都移动一点。试着把它弄光滑一点。谢谢!

$(function() {
  var i = 2;
  $('#addButton').click(function(e) {
    var input = $('#myInput').val();
    console.log(input);
    var id = "newLine" + i;
    var line = '<input type='"text'" id='"' + id + ''" size='"50'" disabled><input type='"checkbox'" >';    
    $('form').append(line);
    var newId = "#" + id;
    $('#myInput').change(function() {
      $(newId).val(input);
    });
    i += 1;
  });
});

JSFiddle

试试这个。在附加输入字段之前为其提供一个值效果很好。在你的情况下，有一个问题与javascript闭包。要解决这个问题，只需在click函数之外定义输入变量

$(function() {
  var i = 2;
  $('#addButton').click(function(e) {
    var input = $('#myInput').val();
    console.log(input);
    var id = "newLine" + i;
    var line = '<input type='"text'" id='"' + id + ''" value='"'+input+''" size='"50'" disabled><input type='"checkbox'" >';
    console.log(line);
    $('form').append(line);
    i += 1;
  });
});

JSFIDDLE

尝试在创建新行时将输入值赋给新输入的value属性:

$(function() {
  var i = 2;
  $('#addButton').click(function(e) {
    var input = $('#myInput').val();
    var id = "newLine" + i;
    var line = '<input type='"text'" id='"' + id + ''" size='"50'" value="' + input + '" disabled><input type='"checkbox'">';
    $('form').append(line);
    var newId = "#" + id;
    /*$('#myInput').change(function() {
      $(newId).val(input);
    });*/
    i += 1;
  });
});
body {
  background-color: white;
}
div {
  width: 750px;
  margin: 0 auto;
  margin-top: 200px;
  margin-bottom: 0;
  padding: 0;
}
form {
  margin: 0 auto;
  display: inline-block;
  margin-bottom: 0px;
}
input {
  padding: 10px 18px;
  float: bottom;
}
input[type=text] {
  border-left: white;
  border-right: white;
  border-top: white;
  font-size: 20px;
  i height: 21px;
  text-align: center;
  outline: none;
  float: right;
  background-color: white;
}
input[type=button] {
  display: inline-block;
  height: 25px border: 0;
  margin: 0 auto;
  font-size: 20px;
  float: right;
}
input[type=checkbox] {
  vertical-align: top;
  width: 10%;
  margin: 15px auto;
  float: right;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<body>
  <div>
    <form id="addThings" type="text">
      <input type="text" id="myInput" placeholder="add to your to-do list" size="50" maxlength="40" autocomplete="off" autofocus>
      <input type="button" id="addButton" value="add">
    </form>
  </div>
</body>

这是一个闭包/作用域问题。变量input在click函数内。因此，它将不在change函数的范围内。

将input的声明移出click函数

创建一个包装器函数

这样，所有需要的变量都在addButtonScopeFunc的范围内，而且只有这里。

这些变量在全局作用域window.和'#addButton'事件函数的作用域中都不需要。

$(function() {
  var addButtonScopeFunc = function (input, inputValChangeEl) {
      var i = 2,
          id = "newLine" + i,
          newId = "#" + id,
          line = '<input type='"text'" id='"' + id + ''" size='"50'" disabled><input type='"checkbox'" >';
      console.log(input);
      console.log(line);
      $('form').append(line);
      $(inputValChangeEl).change(function() {
          $(newId).val(input);
      });
      i += 1;
    };
    $('#addButton').click(function(e) {
        addButtonScopeFunc($('#myInput').val(), '#myInput'); 
    });
});

再举一个例子，只是为了显示一些东西。

您可以在addButtonScopeFunc之外的$(inputValChangeEl).change(...)事件函数中"超出"，在其自己的包装函数中处理input值作为参数。

$(function() {
  var addButtonScopeFunc = function (input, inputValChangeEl) {
      /* ... */
      $('form').append(line);
      changeInputVal(inputValChangeEl, newId, input); 
      i += 1;
  },
  changeInputVal = function (el, id, input) {
      $(el).change(function() {
          $(id).val(input);
      });
  };
  $('#addButton').click(function(e) {
      addButtonScopeFunc($('#myInput').val(), '#myInput'); 
  });
});

进一步阅读:Javascript作用域解释

相关文章：