✔ jquery funktion mit dem namen einer variablen ausführen

[neewby]

Hall ich habe leider wieder ein Problem bei dem ich absolut nicht weiterkomme - für die Profis (und sicher auch für die Amateuere) bestimmt eine Kleinigkeit - aber naja ich komm einfach nicht drauf

Ich habe eine Javascript funktion mit dem namen

load_home();

wenn ich in jquery diese auch direkt eingebe dann wird die funktion mittels

<script>
load_home(); 
</script>

auch ausgeführt.

wenn ich jetzt aber load_home() durch eine variable "$nav_id" ersetzt habe - kann ich den wert der variablen mittels

alert($nav_id);

richtig anzeigen lassen (sprich der output ist load_home()

aber wenn ich diese funktion ausführen will schaffe ich es nicht die variable zu "callen"

was mache ich falsch?
ich habe schon folgendes versucht:

$($nav_id);
function($nav_id);
.function($nav_id);

und andere variationen auch ...

wie muss ich die variable aufrufen dass die funktion mit dem namen der variablen durchgeführt wird.

ich muss es auch über jquery ausführen da sonst die reihenfolge der anderen funktionen/animationen durcheinanderkommt.

danke für die hilfe
lg
neewby

 

[erik s.]

eval(string);

The eval() function evaluates or executes an argument.

If the argument is an expression, eval() evaluates the expression. If the argument is one or more JavaScript statements, eval() executes the statements.

Also in deinem Fall:

var nav_id = "load_home();";
eval(nav_id);

 

[Parantatatam]

@erik s.: eval ist evil, dass sollte man sich merken, und deshalb sollte man eval nur in den Fällen verwenden, wenn es wirklich keine Alternative dazu gibt. Die gibt es hier aber, sogar in drei verschiedenen Varianten:

$function = function () {
  alert('ich bin eine funktion');
}

// Variante 1
$function();

// Variante 2
$function.call(this);

// Variante 3
$function.apply(this);

 

[erik s.]

Kommt davon, wenn man sowas nie benutzt Danke für den Hinweis

 

[neewby]

Hallo, leider hat keiner der Vorschläge funktioniert ... ich poste darum mal den ganzen Code vlt mach ich ja irgend etwas komplett falsch ?

    <script type="text/javascript" src="js/lc_nav.js"></script>  
    <ul>                                 
        <li>
            <a href="#" class="animated" id="load_home()" onmouseover="mouseoversound.playclip()" onclick="clicksound.playclip()">home</a>
        </li>
        <li><a href="#" id="aboutme" onmouseover="mouseoversound.playclip()">about me</a>
            <ul>
                <li><a href="#" class="animated" id="load_bio()" onmouseover="mouseoversound.playclip()" onclick="clicksound.playclip()">bio</a></li>
                <li><a href="#" class="animated" id="load_references()" onmouseover="mouseoversound.playclip()" onclick="clicksound.playclip()">references</a></li>
            </ul>
        </li>
    </ul>   

<script>
//
      $("a.animated").on('click touchend', function(){
          $nav_id = $(this).attr('id');     
            $('a.fadeInDown').toggleClass('fadeInDown');
            $('a.fadeOutUp').toggleClass('fadeOutUp').addClass('fadeInDown');
            $(this).addClass('fadeOutUp');
            $('section.animated').removeClass('bounceInRight');
            
            $('section.animated').addClass('hinge')  
                .delay(3200)
                .queue(function() {
                
                $nav_id = function(){                 
                };              
                    $(this).removeClass('hinge');
                    // hier muss die load_('id') function hinein wie function("load_home");
                    //alert($nav_id);  das hier würde funktionieren                 
                    
 
                    $nav_id.call(this);   // das hier funktioniert leider garnicht in keiner der variationen
                    
                    //load_home();  das hier würde auch funktionieren
                    
                    $(this).addClass('bounceInRight'); 
                    $(this).dequeue();
                });                                                                                           
      });
</script>

 

[erik s.]

Hm, ein bisschen was ist da noch nicht ganz richtig.
Ich habe den ganzen uninteressanten und schlecht eingerückten Teil mal weggelassen.

<script type="text/javascript" src="js/lc_nav.js"></script>  
<ul>
    <li>
        <a href="#" class="animated" id="load_home" onmouseover="mouseoversound.playclip()" onclick="clicksound.playclip()">home</a>
    </li>
    <li><a href="#" id="aboutme" onmouseover="mouseoversound.playclip()">about me</a>
        <ul>
            <li><a href="#" class="animated" id="load_bio" onmouseover="mouseoversound.playclip()" onclick="clicksound.playclip()">bio</a></li>
            <li><a href="#" class="animated" id="load_references" onmouseover="mouseoversound.playclip()" onclick="clicksound.playclip()">references</a></li>
        </ul>
    </li>
</ul>   
 
<script>
    $("a.animated").on('click touchend', function(){
        // $nav_id beinhaltet dann beispielsweise 'load_home' oder 'load_bio'
        $nav_id = $(this).attr('id');
        
        // das Folgende sollte funktionieren:
        (new Function($nav_id+'();'))();
    });
</script>

Das Problem bei "einfach nur crack"´s Variante ist, dass (bezogen auf das Problem des TO) $nav_id nicht die Funktion selber darstellt, sondern eine String-Variable, die als Wert den aufzurufenden Funktionsnamen beinhaltet. Somit sind seine Vorschläge hier leider nicht von Erfolg gekrönt.

Mal ganz abgesehen davon ist dein Lösungsansatz auch nicht unbedingt der beste. Vielleicht sagt dir sowas ja auch zu:

<script type="text/javascript" src="js/lc_nav.js"></script>  
<ul>
    <li>
        <a href="#" class="animated" id="load_home" onmouseover="mouseoversound.playclip()" onclick="clicksound.playclip()">home</a>
    </li>
    <li><a href="#" id="aboutme" onmouseover="mouseoversound.playclip()">about me</a>
        <ul>
            <li><a href="#" class="animated" id="load_bio" onmouseover="mouseoversound.playclip()" onclick="clicksound.playclip()">bio</a></li>
            <li><a href="#" class="animated" id="load_references" onmouseover="mouseoversound.playclip()" onclick="clicksound.playclip()">references</a></li>
        </ul>
    </li>
</ul>   
 
<script>
    var load_content = function(category)  {
        // je nach Kategorie kannst du hier Content laden
        // oder tun was auch immer du tun möchtest
        switch(category)  {
            case "home":
                ...
                break;
            case "bio":
                ...
                break;
            case "references":
                ...
                break;
        }
    }
    
    $("a.animated").on('click touchend', function(){
        // entfernt das 'load_' im ID-Attribut
        var cat = $(this).attr('id').replace(/load_/g, '');
        // ruft die Funktion auf, die für's Laden des Contents zuständig ist
        load_content(cat);
    });
</script>

 

[neewby]

hey eric danke - ja mit dem post #6 klappt es wunderbar !!
die version mit #7 habe ich noch nciht ausprobiert werde ich jetzt aber gleich mal versuchen - auf jedenfall möchte ich mich herzlichst bei dir und trotzdem auch bei "einfach nur crack" für die hilfe und bemühungen bedanken!

Ihr habt mir sehr weitergeholfen und mir weitere schlaflose nächte des kopfzerbrechens ersparen können.


jetzt werde ich noch versuchen das ganze schön aufzuräumen.


kurz zuvor hatte ich es auch mit eval hinbekommen - aber nachdem hier vor eval gewarnt wurde habe ich ein bisschen gegoogelt und herausgefunden, dass es zu ladeschwierigkeiten kommen soll bei der nutzung von eval!

 

[Parantatatam]

Das Problem bei eval() ist außerdem, dass du somit immer Skripts einschleusen kannst. Das ist aber, wenn ich es mir recht überlege, in Javascript egal, da man das clientseitig auch ohne eval() kann.