javascript - JavaScriptは、関数が呼び出されたdom要素を取得します

Question

HTML 部分:

<a href="#" onclick="callme();return false;">foo</a>

JS 部分:

function callme() {
  var me = ?; //someway to get the dom element of the a-tag
  $(me).toggle();
}

JS の部分で、この関数が呼び出された a-tag をどうにか取得できますか?

パラメータとして渡すことができることはわかっていますが、この関数はページで何度も使用されているため、パラメータをどこにでも配置することは避けたいと考えています。

ありがとう！

Answer 1

onclick 属性を使用しているため (BAD!)、それを関数に渡す必要があります。

onclick="callme(this); return false;"

そしてjs：

function callme(el) {
  var $me = $(el);
  $me.doSomething();
}

もう 1 つのオプションは、.call() を使用して関数のコンテキストを設定することです。

onclick="callme.call(this,event)"

そしてjs

function callme(event) {
    event.preventDefault();
    $(this).doSomething();
}

Answer 2

そのための簡単なJS関数があります

 function getEventTarget(event) {
     var targetElement = null;
     try {
         if (typeof event.target != "undefined") {
             targetElement = event.target;
         }
         else {
             targetElement = event.srcElement;
         }
         // just make sure this works as inteneded
         if (targetElement != null && targetElement.nodeType && targetElement.parentNode) {
             while (targetElement.nodeType == 3 && targetElement.parentNode != null) {
                 targetElement = targetElement.parentNode;
             }
         }
     } catch (ex) { alert("getEventTarget failed: " + ex); }
     return targetElement;
 };

あなたのhtmlで

 <a href="#" onclick="callme.call(this,event);return false;">foo</a>

あなたの機能で

 function callme(event) {
   var me = getEventTarget(event); //someway to get the dom element of the a-tag
   $('#'+ me.id).toggle();
 }

getEventTarget() は、好きなように操作できる dom オブジェクト全体を返します。または、他のユーザーが既に使用できると言っていました。

 function callme(event) {
      $(this).toggle();
 }

Answer 3

thisパラメータを関数に送信します。

<a href="#" onclick="callme(this);return false;">foo</a>

function callme(me) {
  $(me).toggle();
}

Answer 4

HTMLマークアップでonlcickを使用しない方がよい

$(document).ready(function() {
  $("a").click(callme);
})

function callme() {
  var me = this;
  $(me).toggle();
}