2012-04-10 15 views
7
parte

HTML:Javascript ottenere l'elemento dom una funzione è stata chiamata da

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

JS parte:

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

nella parte JS posso in qualche modo ottenere l'a-tag che questa funzione è stata chiamata a partire dal?

so che potevo semplicemente passarlo come parametro, ma questa funzione è usata molte volte su una pagina e voglio evitare di mettere il parametro ovunque.

grazie!

risposta

10

Poiché si utilizza un attributo onclick (BAD!), È necessario passarlo nella funzione.

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

ei js:

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

Un'altra opzione è quella di impostare il contesto della funzione utilizzando .Call().

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

ei js

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

+2 per l'utilizzo di '.Call()'; -1 per implicare che gli attributi onclick sono cattivi. ;) –

+0

Immagino che non siano BAD, ma non uno stile di programmazione che suggerirei a chiunque. –

+1

Si presuppone che l'OP utilizzerà jQuery, che ha solo taggato come javascript. – Maess

0

inviare this parametro alla funzione.

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

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

Ho una semplice funzione di JS per quel

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; 
}; 

nel tuo html

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

nella funzione

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

getEventTarget() riporterà l'intero oggetto dom che puoi mani pulate come ti pare, o è stato già detto da altri utenti si può semplicemente utilizzare

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

meglio non uso onlcick in HTML markup

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

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