2012-03-31 8 views
0

Ich habe eine JS-Datei mit einer einfachen Funktion, die Breite/Höhen von divs entspricht. Wie kann ich diese Funktion mit Attributen aus HTML-Datei aufrufen.Call JS-Funktion mit Attributen aus einer anderen Datei

Mit anderen Worten, ich möchte eine Funktion MatchHeight (div1, div2) in einer externen Datei schreiben, aber von wo aus ich will mit den divs, die ich will.

Die Funktion existiert, ich weiß einfach nicht, wie ich es so nennen soll, wie ich es möchte.

Entschuldigung, wenn ich mich nicht klar erkläre.

Danke.

Antwort

1

Wenn Sie Ihre MatchHeights(d1,d2){ ... } Funktion in einer JS Datei und verknüpfen Sie die Datei in Ihrem HTML Seite schreiben, wie Sie normalerweise jede JS Datei verknüpfen würde, dann können Sie die function in jedem Teil Ihrer Seite aufrufen, solange Sie den Anruf Funktion, nachdem die verknüpfte Datei vom Browser geladen wurde.

Tatsächlich könnten Sie es sogar in anderen JS Dateien aufrufen, solange die ursprüngliche Datei vor den anderen vom Browser geladen wird.

Um die function zu erhalten, sobald die Seite geladen wird ausgeführt, die function im onload Ereignis des body Tag nennen:

<script type="text/javascript"> 
var div1 = (some code to get the element) 
var div2 = (some code to get the element) 
</script> 
... 
... 
<body onload="matchHeight(div1,div2)"> 
1

Sie müssen die JS-Datei in Ihrer HTML-Datei wie folgt verlinken:

<head> 
<script src="yourJSFile.js" type="text/javascript"></script> 
</head> 
<body onLoad="yourFunction();"> 
</body> 
0

Ein wirklich gemeinsames Muster in jQuery, die Sie anwenden können, in dem CSS-Selektor ist vorbei. Es ist am einfachsten, wenn Sie einfach die IDs der divs einreichen, aber andere Lösungen funktionieren auch.

Als erstes nehmen Sie alle Argumente aus Ihrer Init-Zeichenfolge. Es ist viel zu kompliziert. Versuchen Sie stattdessen:

<body onload="init()">

function init() { 
    matchHeight("id1", "id2"); 
} 

Sobald Sie, dass Sie die tatsächliche div in diesen Funktionen wie diese:

function matchHeight(id1, id2) { 
    var div1 = document.getElementById(id1) 
    var div2 = document.getElementById(id2) 
    // .. other stuff 
} 

Wenn Sie mit jQuery würde ich empfehlen, diese Vereinfachung noch mehr, indem Sie die Funktion init() aus dem body-Tag vollständig entfernen, ersetzen Sie es mit jquery(document).load(function() { und mit normalen CSS-Selektoren statt .... matchHeight("#id1", "#id2") und var $div1 = $(id1);, aber jeder Weg wird funktionieren :)

Verwandte Themen