jQuery獲取按鈕點擊的輸入值

Question

如何使輸入值顯示按鈕點擊的每個輸入而不刪除以前的輸入？

$(document).ready(function(){ 
 
    $("#btn").click(function(){ 
 
    var getVal = $("#inputValue").val(); 
 
    $("p").html(getVal); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="main"> 
 
    <fieldset> 
 
    <legend>jQuery input value</legend> 
 
    <input id="inputValue" type="text" name="text"> 
 
    </fieldset> 
 
    <button id="btn">display value</button> 
 
    <p></p> 
 
</div>

Answer 1

你有兩個選擇：

1. 內容添加到以前的內容：

$(document).ready(function(){ 
 
    $("#btn").click(function(){ 
 
    var getVal = $("#inputValue").val(); 
 
    $("p").html($("p").html() + " " + getVal); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="main"> 
 
    <fieldset> 
 
    <legend>jQuery input value</legend> 
 
    <input id="inputValue" type="text" name="text"> 
 
    </fieldset> 
 
    <button id="btn">display value</button> 
 
    <p></p> 
 
</div>

使用append代替html：

$(document).ready(function(){ 
 
    $("#btn").click(function(){ 
 
    var getVal = $("#inputValue").val(); 
 
    $("p").append(getVal); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="main"> 
 
    <fieldset> 
 
    <legend>jQuery input value</legend> 
 
    <input id="inputValue" type="text" name="text"> 
 
    </fieldset> 
 
    <button id="btn">display value</button> 
 
    <p></p> 
 
</div>

您使用html將覆蓋p元素的內容。

Answer 2

使用append而不是html

$(document).ready(function(){ 
$("#btn").click(function(){ 
    var getVal = $("#inputValue").val(); 
    $("p").append(getVal); <--- CHANGE HERE 
}); 

append html

Answer 3

你的意思是，附加價值作爲價值的歷史？

如果是，append()就是它的答案。

$(document).ready(function() { 
    $("#btn").click(function() { 
     var getVal = $("#inputValue").val(); 
     $("p").append(getVal); 
    }); 
}); 

瞭解更多關於在這裏，http://api.jquery.com/append/