无法通过jquery将值从一个输入传递到另一个输入

我正在做一个小小的noob项目，并且制作一个简单的“待办事项列表”，而且我看起来很简单！我试图从#myInput传递主要的顶部，并传递给下一个等等。现在，如果你输入了一些东西，然后点击添加，它会首先由于某种原因创建一个空白的新行，然后如果你输入其他东西并点击添加，你之前输入的内容将显示在下一行。只要你在输入中键入不同的东西，它会一直这样做，但如果你继续敲击输入中的同一个东西，就没有任何东西出现。然后再次改变输入到不同的东西，点击添加，所有会显示大声笑，但仍然没有你输入的当前行输出...坚果。任何建议的正确方法来做到这一点？我留下了一个JSfiddle链接来查看下面正在发生的事情。无法通过jquery将值从一个输入传递到另一个输入

<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改变什么bit..ideas一切吗？试图让它更平滑一些。谢谢！

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

来源

2016-07-04 Bruce O.

输入变量的JavaScript关闭。 –

为什么不像这个[小提琴]（https://jsfiddle.net/YuriJF/97t9ztd6/12/） – Yuri

感谢信息家伙！肯定阅读关闭 –

试试这个。在添加之前为输入字段提供一个值可以很好地工作。在你的情况下，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

来源

2016-07-04 07:12:35

尝试解释_why_和_how_您提出的解决方案修复了OP的代码，而不是仅提供没有任何注释的代码段。 –

@kb。谢谢你的提示。我将从现在开始保持这样的状态 –

@ShubhamKhatri哇，不敢相信我被困在这么简单的事情上......在那里我去推翻一切！甚至没有考虑价值属性。不知道什么会顺利，在CSS将转向雅？ –

尝试输入值分配给在创建新的生产线的新的输入值属性：

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

来源

2016-07-04 07:10:26 Roxoradev

这是一个封闭/范围问题。您的变量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'); 
    }); 
});

举个例子等，只是显示出来的东西。

你可以“outscope”的$(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

来源

2016-07-04 07:12:26

这将绑定每次单击addButton时的更改事件 – Yuri

@Yuri编辑答案 –

无法通过jquery将值从一个输入传递到另一个输入

回答

相关问题