Javascript获取调用函数的dom元素

时间:2012-04-10 14:46:22

标签: javascript

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吗?

我知道我可以将它作为参数传递,但是这个函数在页面上使用了很多次,我想避免将参数放在任何地方。

谢谢!

4 个答案:

答案 0 :(得分:12)

由于您使用的是onclick属性(BAD!),您必须将其传递给函数。

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

和js:

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

另一种选择是使用.call()。

设置函数的上下文
onclick="callme.call(this,event)"

和js

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

答案 1 :(得分:3)

我有一个简单的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();
 }

答案 2 :(得分:-1)

this参数发送到您的函数。

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

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

答案 3 :(得分:-1)

最好不要在html标记中使用onclick

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

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