Question

当您按下“显示文字”按钮时，我希望警告框显示已输入任何动态生成的输入框的所有文字形式。

我使用下面的代码来定位：p类和输入

$(document).ready(function(){
    $("#btn1").click(function(){
        alert("Value: " + $("input",'.n').val());
    });

上面的代码似乎只返回首先使用的输入框中的文本..

..所以，如果你点击 note1 然后 note2 ，你只能获得'Hello'（而不是：你好再见）

..如果您点击 note2 然后 note1 ，您只能获得'再见'（而不是：再见你好）

请任何人帮忙！

$(function() {
var addDiv = $('#addinput');
var i = $('#addinput p').size() + 1;

/*     Template 1    */
$('#addNew1').live('click', function(e) {
$('<p class="n"><input type="text" id="p_new" size="40" name="p_new_' + i +'" value="hello" placeholder="This is note 1" /><a href="#" id="remNew">Remove</a> </p>').appendTo(addDiv);
i++;
e.preventDefault();

});

/*     Template 2    */
$('#addNew2').live('click', function(e) {
$('<p class="n"><input type="text" id="p_new" size="40" name="p_new_' + i +'" value="goodbye" placeholder="This is note 2" /><a href="#" id="remNew">Remove</a> </p>').appendTo(addDiv);

i++;
e.preventDefault();
});

/*     Template 3    */
$('#addNew3').live('click', function(e) {
$('<p><input type="text" id="p_new" size="40" name="p_new_' + i +'" value="Say cheese!" placeholder="This is note 3" /><a href="#" id="remNew">Remove</a> </p>').appendTo(addDiv);
i++;

e.preventDefault();
});

$('#remNew').live('click', function(e) {
if( i > 2 ) {
$(this).parents('p').remove();
i--;
}
e.preventDefault();
});
});

$(document).ready(function(){
    $("#btn1").click(function(){
        alert("Value: " + $("input",'.n').val());
    });
});

<html>
<head>
<title> </title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> 
<script>

</script>
</head>

<body>
<h2>Note Template</h2>

			<a href="#" id="addNew1">note1</a> 
			<a href="#" id="addNew2">note2</a>
			<a href="#" id="addNew3">note3</a>
			
	<div id="addinput">
		<p> </p>
	</div>
	
	<button id="btn1">Show Text</button>	
	<input class="n" type="text" value="some text">

</body>
</html>

任何人都想尝试..有效的新代码功能如下（只需用这个替换第一个代码片段）

$(document).ready(function(){
    $("#btn1").click(function(){
	var txt = $(".n input").map(
        function () {
            return $(this).val();
        }
     ).get().join("\n");
     console.log(txt);
	 alert("This is my note" + txt);

Answer 1

val（）仅返回文档中声明的第一个输入的值。如果要显示所有值，则需要遍历所有输入并构建字符串。

var str = [];
$(".n input").each(
    function () {
        str.push($(this).val());
    }
);
console.log(str.join("\n"));

而不是每个，你可以使用jQuery map

var txt = $(".n input").map(
        function () {
            return $(this).val();
        }
    ).get().join("\n");
console.log(txt);

如何定位生成的所有动态表单的Input元素

1 个答案: