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で数値を取得します。たとえば、ユーザーがクリックした要素3 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]")「element」で始まるid値を持つページ上のすべての要素を検索します。

  2. .click(function() { ... }) 一致した要素にクリックハンドラーを接続します。

  3. $("#values")id「値」で要素を検索します。

  4. .text(...) 一致した要素のテキストを設定します。

  5. $(this).text()this値（jQueryclickハンドラー内でクリックイベントをフックした要素）を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セレクター（およびいくつか）を使用してイベントをフックする要素を見つけることができるということです。

jQueryAPIを1時間だけ読んでみる価値は十分にあります。文字通り1時間程度で、とても便利です。

于 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 に答える