1 
<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做到这一点？

4

3 回答 3

3

首先，您删除onclick处理程序。然后你这样做：

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

分解它：

  1. $("[id^=element]")查找页面上所有具有以“元素”开头id的值的元素。

  2. .click(function() { ... }) 在匹配的元素上连接一个点击处理程序。

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

  4. .text(...) 设置匹配元素的文本。

  5. $(this).text()将this值（在 jQueryclick处理程序中是您挂钩 click 事件的元素）包装在 jQuery 包装器中，然后从中获取其文本。

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 选择器（然后是一些）找到将事件挂钩的元素。

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

于 2012-11-18T08:56:11.627 回答
2

你可以这样做

$('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());
});

请注意，您应该 onclick="add();"从现有的 div 中删除。我本可以建议您创建一个add函数，但最佳实践是通过使用 jQuery 绑定函数绑定事件侦听器来将代码与 HTML 分开。

于 2012-11-18T08:54:18.447 回答
0

首先，不要在 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()):
});
于 2012-11-18T08:59:46.017 回答