Aufrufen einer Funktion anhand einer Zeichenfolge, die den Funktionsnamen enthält

Question

var foo1,foo2;

switch (fn)
{
    case "fade"  : foo1 = "fadeOut"; foo2 = "fadeIn"; break;                
    case "slide" : foo1 = "slideUp"; foo2 = "slideDown"; break;
}

eval("$('.cls1')." + foo1 + "();");
currentSlideIndex = currentSlideIndex + n;
eval("$('.cls1')." + foo2 + "();");

Gibt es eine bessere Möglichkeit, dies zu erreichen, ohne eval zu verwenden? Im nicht ein sehr großer Fan der Verwendung von eval es sei denn, absolut notwendig.

Answer 1

$('.cls1')[foo1]();
currentSlideIndex = currentSlideIndex + n;
$('.cls1')[foo2]();

Answer 2

Sie brauchen nicht zu verwenden eval können Sie einfach die Klammerschreibweise verwenden Property-Accessor :

$('.cls1')[foo1]();

Answer 3

Da die Funktionsnamen, die in foo1 y foo2 sind Eigenschaften des Objekts, das von $('.cls1') sollte das Folgende funktionieren:

$('.cls1')[foo1]();

Dasselbe gilt für foo2 .

Answer 4

Sie können die Syntax verwenden:

$('selector')[foo1]();

Eine andere Möglichkeit, die Methode dynamisch aufzurufen, besteht darin, eine neue Methode zu erstellen, die folgende Angaben enthält

(function() {
  $.fn.someFunc = function(what)
  {
    switch(what) {
      case 'fadeOut':
        $(this).fadeOut();
        break;
        // etc
      default:
        // handle an unknown value
    }
  }
})(jQuery);

$('.cls1').someFunc('fadeOut');

So können Sie schnell kontrollieren, was passiert, anstatt etwas als foo1 zu übergeben.

Answer 5

Sie können diese Strategie auf Ihre Bedürfnisse abstimmen:

function doFade() {
  alert('fade');
}

function doFadeIn() {
  alert('fadeIn');
}

var fns = {
  'fade': doFade
  , 'fadeIn', doFadeIn 
};

function callSomething(what) {
  fns[what]();
}

// callSomething('fadeIn'); => alerts 'fadeIn'