2016-05-01 4 views
1

hier genannt wurde mein mein HTML ist:Wie das Element herauszufinden, wo eine Funktion von (Javascript)

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<link rel = "stylesheet" type="text/css" href="styles/css/style.css" /> 
</head> 
<body> 
<div> 
    <select class="option_block" size="5" multiple="1"> 
      <option>Option 1</option> 
      <option>Option 2</option> 
      <option>Option 3</option> 
      <option>Option 4</option> 
      <option>Option 5</option> 
     </select> 

     <div class="button_block" multiple="1"> 

      <button class="move_button" id="MoveAllToRight">>></button> 
      <button class="move_button" id="MoveToRight">></button> 
      <button class="move_button" id="MoveToLeft"><</button> 
      <button class="move_button" id="MoveAllToLeft"><<</button> 

     </div> 

    <select class="option_block" size="5"></select> 

</div> 

<script src="scripts/javascript/script.js"></script> 
</body> 
</html> 

Adh hier ist meine JS-Skript:

(function(){ 

function move(direction) { 
.......... 
} 

function moveAll(direction) { 
........... 
} 


document.getElementById("MoveAllToRight").addEventListener("click", function() { 
    moveAll('ToRight'); 
}); 

document.getElementById("MoveToRight").addEventListener("click", function() { 
    move('ToRight'); 
}); 

document.getElementById("MoveToLeft").addEventListener("click", function() { 
    move('ToLeft'); 
}); 

document.getElementById("MoveAllToLeft").addEventListener("click", function() { 
    moveAll('ToLeft'); 
}); 


})(); 

ich beschlossen, nicht zu zeige enthalten von move und moveAll functon weil es offensichtlich übermäßige Informationen ist.

Wie bekomme ich Zugriff auf "div", das beide Elemente in move und moveAll Funktionen enthält? Ich habe eine Lösung mit der Verwendung von "ID" s, aber es ist nicht skalierbar.

+0

'document.getElementById („MoveAllToLeft“) .parentElement' – Redu

+0

Verwenden Sie 'event.currentTarget' (des Parameters' event') oder 'this' im jeweiligen Callback und übergeben Sie diese an' move'/'moveAll'. – Bergi

Antwort

1
document.getElementById("MoveAllToRight").addEventListener("click", function(event) { 
    moveAll(event, 'ToRight'); 
}); 

Innerhalb der Funktion event.target werden Sie das Element zeigen, von dem das Ereignis aufgerufen wurde.

+1

Sie haben vergessen, das 'event' Objekt an den Callback zu übergeben. –

+1

Durch Aufruf von 'moveAll (event, 'ToRight')' wird die Funktion ausgeführt und nicht als Callback angehängt. –

1

Wenn Sie Ihre Ereignis-Listener nicht explizit an etwas anderes binden, wird das Schlüsselwort 'this' zum Element, von dem das Ereignis ausgelöst wurde.

So sollten Sie in der Lage sein, den Eltern div zuzugreifen, indem

this.parentElement 

tun oder herauszufinden, wie der Dom zu gehen mit dem, was Bibliothek Sie arbeiten mit

Verwandte Themen