3

私が持っているとしましょう

<body>
 <div id="stuff">
  <div id="cat">a</div>
  <div id="dog">b</div>
  <div id="elephant">c</div>
  <div id="rabbit">d</div>
  <div id="frog">e</div>  
 </div>
</body>​

これまでのところ、私が得ることができたクローゼットは JS でした。

document.getElement('body').onclick = function(e){
    alert(e.target.innerHTML);
}​

「a」や「b」ではなく、「cat」や「dog」のようなリテラル div id が必要な場合に、div の内容を出力します。また、jQueryを使用してこれを達成しようとしていますが、正しい方向に向かっていますか?

4

4 に答える 4

5

jQuery メソッドを使用するには、 jQuery js ファイルを含める必要があります。

jQueryで

$('body').click(function(e){
    alert(e.target.innerHTML);
    alert(e.target.id)
    alert($(e.target).attr('id'));
}​);

Javascript あり

document.getElement('body').onclick = function(e){
    alert(e.target.innerHTML);
    alert(e.target.id)
}​

JQuery を使用したサンプル HTML ページ

<!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="utf-8">
   <title>jQuery demo</title>
 </head>
 <body>
   <a href="http://jquery.com/">jQuery</a>
   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
   <script type="text/javascript">
     document.getElement('body').onclick = function(e){
        alert(e.target.innerHTML);
        alert(e.target.id)
     }​
   </script>
 </body>
</html>
于 2013-01-05T01:49:03.577 に答える
2

http://jsbin.com/ohotuv/1/edit

document.getElementById('stuff').onclick = function( e ){
    alert( e.target.id );
};

jQ 方法:

$('#stuff').click(function( e ){
    alert( e.target.id );
});

IDを持っていないがCLASSを持っている場合 (そしてあなたがそれを望む!)、次のことができます:

http://jsbin.com/ohotuv/3/edit - (「elephant」はクラス)

$('#stuff').click(function( e ){
    var name = e.target.id || e.target.className;
    alert(name);
});
于 2013-01-05T02:59:38.300 に答える
1

ピュアjavascriptを使用している場合は、クロスブラウザ互換にする必要があるかもしれません。

window.onload=function(){
    document.getElementsByTagName('body')[0].onclick = function(e){
        e = e ? e : window.event;
        var source = e.target || e.srcElement;
        alert(source.id);
    }
}
于 2013-01-05T02:57:44.953 に答える
0

jQuery.on()を読むことをお勧めします。

あなたの例では、次のことをお勧めします。

$("body").on("click", function(event){
  alert($(this).id);
});

クリック イベントを探している要素のスコープを縮小することを強くお勧めします。例えば:

$("#stuff").on("click", "div", function(event){
  alert($(this).id);
});

これは、htmlタグ内のidがstuffのdiv要素のみを処理します。イベント処理のコンテキストを減らすと、カプセル化とデバッグの問題に役立ちます。

于 2013-01-05T02:20:55.183 に答える