Question

我正在做一个小菜鸟项目，并制作一个简单的“待办事项列表”，我坚持看似简单的事情！我试图从#myInput传递主要的顶部并将其传递到下一个等等。现在，如果你输入的东西然后点击添加，它首先会因某种原因创建一个空白的新行，然后如果你键入其他内容并点击添加，你在下一行显示之前键入的内容。只要你在输入中键入不同的东西，它就会继续这样做，但是如果你继续按输入中的相同内容添加几次，则不会显示任何内容。然后再次将输入更改为不同的内容，然后单击“添加”，所有将显示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>

此外，当您单击按钮并在下方创建一个新行时，它会将所有内容都移动一下......如果需要在css中更改哪些内容？试着让它变得更顺畅。谢谢！

$(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

Answer 1

试试这个。在附加之前为输入字段提供值很有效。在您的情况下，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

Answer 2

尝试在创建新行时将输入值分配给新输入的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>

Answer 3

这是一个关闭/范围问题。您的变量input位于click函数内。因此，它不会属于change函数的范围。

将input函数的声明移到click以外。

创建包装函数。

这样所需的所有变量都在addButtonScopeFunc的范围内，只有。{/ p>

全局范围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'); 
    });
});

举一个例子，只是为了展示事物。

你可以“{em>超越”在$(inputValChangeEl).change(...)之外的addButtonScopeFunc事件函数，在其自己的包装函数中处理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 Scopes well explained

使用jquery将值从一个输入传递到另一个输入时遇到问题

3 个答案: