如何在html中獲取數字並用jquery寫入另一個html標記？

Question

<div id="element1" onclick="add();">10</div> 
<div id="element2" onclick="add();">56</div> 
<div id="element3" onclick="add();">42</div> 
<div id="element4" onclick="add();">109</div> 
<div id="element5" onclick="add();">45</div> 

<div id="values"></div> 

當用戶點擊任何div將採取html值的數值例如用戶點擊element3 42採取和編寫的HTML號碼什麼是id值是什麼值。當用戶點擊任何div後，將再次獲取數字，例如element4 109已經拍攝和寫入，但是42不會被刪除。喜歡這個;

42,109，...

我該如何做到這一點與jQuery的？

Answer 1

你可以做到這一點

$('div[id^="element"]').click(function(){ // bind only on div whose if starts with element 
    var existing = $('#values').text(); 
    $('#values').html(existing ? existing + ',' + $(this).text() : $(this).text()); 
}); 

請注意，你應該從你現有的div刪除onclick="add();"。我可能建議你創建一個add函數，但最好的做法是通過使用jQuery綁定函數綁定事件偵聽器來將代碼與HTML分離。

Answer 2

首先，您刪除了onclick處理程序。然後，你這樣做：

$("[id^=element]").click(function() { 
    $("#values").text($(this).text()); 
}); 

其分解：

1. $("[id^=element]")查找有一個id值starting with 「元素」 頁面上的所有元素。

2. .click(function() { ... })hooks up a click handler上的匹配元素。

3. $("#values")用id「值」查找元素。

4. .text(...)sets the text匹配元素。

5. $(this).text()包裹this值（一個jQuery click處理器中是你大呼過癮點擊事件的元素）的一個jQuery包裝從它，然後gets its text。

即使清潔是，如果你可以從完全的元素去掉elementXid值，並用類替換它們，例如：

<div class="source">10</div> 
<div class="source">56</div> 
<div class="source">42</div> 
<div class="source">109</div> 
<div class="source">45</div> 

<div id="values"></div> 

然後：

$(".source").click(function() { 
    $("#values").text($(this).text()); 
}); 

或者你可以將它們放在容器中並使用某種結構選擇器。關鍵是你可以找到使用任何CSS3選擇器（然後一些）鉤住事件的元素。

非常值得花費一小時通過the jQuery API閱讀。它實際上只需要一個小時左右，而且非常有用。

Answer 3

首先，不要在jQuery中使用onclick。其次，除非您在別處使用id =「element1」部分，否則請不要爲每個元素使用一個id。這是更推薦：

<div class="clickable">10</div> 
<div class="clickable">56</div> 
<div class="clickable">42</div> 
<div class="clickable">109</div> 
<div class="clickable">45</div> 

<div id="values"></div> 

$('.clickable').click(function(){ 
    $('#values').html($(this).text()): 
});