2015-02-05 36 views
0

當你按下按鈕「顯示文本」 - 我想提醒框顯示已進入由該所產生的輸入框中任何所有文字動態的形式。如何針對所有動態的形式輸入元件所產生

我用下面的代碼到目標:在p類和輸入

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

上面的代碼似乎只返回任何輸入框首次使用的文本..

..所以,如果你點擊注1然後注2你只能得到「你好」(而不是:你好 再見)

..如果你點擊然後注2注1你只能得到「再見」(而不是:再見 你好)

請誰能幫助!

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

 
\t \t \t <a href="#" id="addNew1">note1</a> 
 
\t \t \t <a href="#" id="addNew2">note2</a> 
 
\t \t \t <a href="#" id="addNew3">note3</a> 
 
\t \t \t 
 
\t <div id="addinput"> 
 
\t \t <p> </p> 
 
\t </div> 
 
\t 
 
\t <button id="btn1">Show Text</button> \t 
 
\t <input class="n" type="text" value="some text"> 
 

 
</body> 
 
</html>

櫃面有人想試試..這工作的新代碼功能是低於(只是這一個替換第一個代碼段)

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

+1

FYI:現場已被棄用,從jQuery的現代版本中刪除。你真的應該升級到更新的版本。 1.4歲4歲。 – epascarello 2015-02-05 13:48:34

回答

0

val()僅返回第一個輸入的值,如文檔中所述心理狀態。如果你想顯示所有的值,你需要遍歷所有的輸入並建立字符串。而不是每個

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

,你可以使用jQuery地圖

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

謝謝@epascarello。對不起,我很頭暈(我真的很熟悉並學習JQuery)我需要在$(「btn1」)之後插入這個代碼。click(function(){讓它工作嗎? – McM 2015-02-05 14:21:30

+0

如果你想讓它運行點擊後,您可以將其添加到點擊中的功能中。 – epascarello 2015-02-05 14:22:18

相關問題