我尝试创建一个动态输入表单组来添加额外的行。 在输入组中添加行有效!
现在我想发回一个包含行数的变量。 我有一个计算行数的循环。但变量保持不变。
$(document).ready(function(){
var max_fields = 16;
var add_input_button = $('.add_input_button');
var field_wrapper = $('.field_wrapper');
var input_count = 4;
var new_field_html = // html code with input_count(works but stays on 4)
// Add button dynamically
$(add_input_button).click(function(){
if(input_count < max_fields){
input_count++;
console.log(input_count);
$(field_wrapper).append(new_field_html);
}
});
我可以在我的控制台日志中看到正确的循环!
如何更改代码以根据返回值更新 input_count？ 问题截图
最佳答案
您应该在点击事件中移动此行，因为此行仅在页面加载时调用一次。因此，要在新字段中使用 input_count 增量值，它也应该在每次执行点击时形成。
var new_field_html =//带有 input_count 的 html 代码(有效但保持在 4)
这里我设计了一个粗略的页面，你要实现的是什么，请看评论理解。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>The HTML5 Herald</title>
</head>
<body>
<form>
<div class="field_wrapper">
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<button type="button" class="btn btn-primary add_input_button">Submit</button>
</div>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
var max_fields = 16;
var add_input_button = $('.add_input_button');
var field_wrapper = $('.field_wrapper');
var input_count = 4;
// html code with input_count(works but stays on 4)
console.log("Outside ======> " + input_count); // Executes only on page load
// Add button dynamically
$(add_input_button).click(function(){
if(input_count < max_fields){
input_count++;
var new_field_html = '<div class="form-group"><button type="button" class="btn btn-primary" class="add_input_button">Submit-' + input_count + '</button></div>';
$(field_wrapper).append(new_field_html);
console.log("Inside ======> " + input_count); // Executed everytime the button is clicked
}
});
console.log("Outside-2 ======> " + input_count); // Executed only on page load
});
</script>
</body>
</html>
关于javascript - 在循环中使用计数来更新变量javascript，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57626035/