jquery - 如何获取 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

首先，删除 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“values”的元素。

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

5. $(this).text() 包装 this 值(在 jQuery click 处理程序中是元素您在 jQuery 包装器中 Hook 了单击事件)，然后 gets its text来自它。

如果您可以从元素中完全删除 elementX id 值并将其替换为类，则更加清晰，例如:

<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 选择器(以及一些选择器)找到用于 Hook 事件的元素。

花一个小时阅读 the jQuery API 是非常值得的。 。它实际上只需要一个小时左右，而且非常有用。