Wie übergibt man eine Variable an eine anonyme JavaScript-Funktion?

Das Ziel

Möchte ich das dynamische zuweisen von event-Handler, um einige divs auf Seiten innerhalb einer Website.

Meine Methode

Im mit jQuery zum binden von anonymen Funktionen als Handler für die ausgewählten div-Ereignisse.

Das Problem

Den code durchläuft eine Reihe von div-Namen und die zugehörigen urls. Die div-name wird verwendet, um das verbindliche Ziel-also bringen Sie diese Ereignishandler, um das div-event.

Während der event-Handler sind erfolgreich gebunden, um alle div-Ereignisse, die von Aktionen ausgelöst, die durch diese Ereignis-Handler immer nur den Gegner das Letzte Element im array.

Also die Idee ist, dass, wenn der Benutzer die Maus über einem bestimmten div, es sollte eine slide-out-animation für das div. Aber stattdessen fährt man mit der Maus über div1 (rangeTabAll) löst eine slide-out-animation für div4 (rangeTabThm). Das gleiche gilt für divs 2, 3 usw. Die Reihenfolge ist unwichtig. Ändern der array-Elemente um und Ereignisse werden immer den Gegner das Letzte element im array, div4.

Mein Code (jQuery Verwendet)

var curTab, curDiv;
var inlineRangeNavUrls=[['rangeTabAll','range_all.html'],['rangeTabRem','range_remedial.html'],
                ['rangeTabGym','range_gym.html'],['rangeTabThm','range_thermal.html']];
        for (var i=0;i<inlineRangeNavUrls.length;i++)
        {
            curTab=(inlineRangeNavUrls[i][0]).toString();
            curDiv='#' + curTab;
            if  ($(curDiv).length)
            {
                $(curDiv).bind("mouseover", function(){showHideRangeSlidingTabs(curTab, true);} );
                $(curDiv).bind("mouseout", function(){showHideRangeSlidingTabs(curTab, false);} );
            }
        }

Meine Theorie

Bin ich entweder nicht zu sehen, ein offensichtlichen syntax-Fehler oder seine eine referenzübergabe problem.
Zunächst hatte ich die folgende Anweisung, um den Wert curTab:

curTab=inlineRangeNavUrls[i][0];

Also, wenn das problem auftrat, dachte ich, als ich geändert (via for-Schleife, iteration) der Verweis auf die curTab, ich war in der Tat ändern die Referenz für alle vorherigen anonyme Funktion, event-Handler, um die neue curTab Wert.... das ist der Grund, warum event-Handler immer gezielt das Letzte div.

Also, was ich wirklich tun musste, um passieren die curTab Wert der anonymen Funktion event-Handler nicht die curTab Objekt Referenz.

Also dachte ich:

curTab=(inlineRangeNavUrls[i][0]).toString();

das problem beheben würde, aber es funktioniert nicht. Gleiche deal. So deutlich im fehlen einige Schlüssel, und wahrscheinlich sehr grundlegenden, das wissen über das problem. Danke.

InformationsquelleAutor der Frage rism | 2009-07-30

Müssen Sie erstellen eine neue variable bei jedem Durchlauf durch die Schleife, so dass er eingefangen in die Verschlüsse, die Sie erstellen, für den Ereignis-Handler.

Jedoch lediglich verschieben der Deklaration der Variablen in der Schleife nicht erreichen, weil JavaScript nicht vorstellen, einen neuen Bereich für frei wählbare Bausteine.

Einfache Weise zu zwingen, die Einführung eines neuen Bereichs ist die Verwendung einer anderen anonymen Funktion:

for (var i=0;i<inlineRangeNavUrls.length;i++)
{
  curDiv='#' + inlineRangeNavUrls[i][1];
  if ($(curDiv).length)
  {
    (function(curTab)
    {
      $(curDiv).bind("mouseover", function(){showHideRangeSlidingTabs(curTab, true);} );
      $(curDiv).bind("mouseout", function(){showHideRangeSlidingTabs(curTab, false);} );
    })(inlineRangeNavUrls[i][0]); //pass as argument to anonymous function - this will introduce a new scope
  }
}

Als Jason schlägtkönnen Sie tatsächlich sauber bis ganz ein bisschen mit jQuery built-in hover() Funktion:

for (var i=0;i<inlineRangeNavUrls.length;i++)
{
  (function(curTab) //introduce a new scope
  {
  $('#' + inlineRangeNavUrls[i][1])
    .hover(
      function(){showHideRangeSlidingTabs(curTab, true);},
      function(){showHideRangeSlidingTabs(curTab, false);} 
    );
  //establish per-loop variable by passsing as argument to anonymous function
  })(inlineRangeNavUrls[i][0]); 
}

InformationsquelleAutor der Antwort Shog9

16

was hier Los ist, dass Ihr anonmymous Funktionen bilden einen Verschluss, und unter Ihrem äußeren Umfang mit Ihnen. Das bedeutet, dass, wenn Sie auf curTab in Ihrem anomymous-Funktion, wenn der event-handler wird ausgeführt, die Funktion, es geht um die aktuellen Wert von curTab in Ihrem äußeren Umfang. Das wird das sein, was Sie zuletzt zugewiesen curTab. (nicht das, was zugewiesen wurde, auf die Zeit, die Sie gebunden mit der Funktion)

was Sie tun müssen, ist, ändern Sie diese:
```
$(curDiv).bind("mouseover", function(){showHideRangeSlidingTabs(curTab, true);} );
```
:
```
$(curDiv).bind("mouseover", 
    (function (mylocalvariable) { 
        return function(){
            showHideRangeSlidingTabs(mylocalvariable, true);
        } 
    })(curTab) 
);
```
dieser Befehl kopiert den Wert von curTab in den Geltungsbereich der äußeren Funktion die innere Funktion. Das kopieren geschieht in der gleichen Zeit, Sie sind verbindlich, die innere Funktion ist der event-handler, also "mylocalvariable" spiegelt den Wert des curTab damals. Dann das nächste mal um die Schleife, die eine neue äußere Funktion, mit der Sie einen neuen Bereich erstellt werden, und der nächste Wert curTab kopiert hinein.

shog9 Antwort führt im Grunde die gleiche Sache, aber der code ist ein wenig mehr strenge.

es ist ein bisschen kompliziert, aber es macht Sinn, wenn man darüber nachdenkt. Verschlüsse sind seltsam.

edit: UPS, haben vergessen zurückzukehren die innere Funktion. Behoben.

InformationsquelleAutor der Antwort Breton
1

Ich denke, du machst das komplizierter als es sein muss. Wenn alles, was Sie tun, ist die Zuordnung eines Gleit-Effekt bei mouseover/- out, dann versuchen Sie die schweben - Effekt mit jquery.
```
$("#mytab").hover(function(){
    $(this).next("div").slideDown("fast");},
  function(){
    $(this).next("div").slideUp("fast");
});
```
Wenn Sie veröffentlicht Ihre vollständigen HTML -, ich könnte Ihnen genau sagen, wie es zu tun 🙂

InformationsquelleAutor der Antwort Jason

Du kannst deine variable Wert in einen nicht vorhandenen tag, und Sie können diese später Lesen Sie Sie von dort. Dieses snippet ist Teil einer Schleife:

 s = introduction.introductions[page * 6 + i][0]; //The variables content
 $('#intro_img_'+i).attr('tag' , s);              //Store them in a tag named tag
 $('#intro_img_'+i).click( function() {introduction.selectTemplate(this, $(this).attr('tag'));}  );  //retrieve the stored data

InformationsquelleAutor der Antwort Gyuri

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.