Question

我正在尝试将一个函数转换为javascript对象，但是在执行此过程时似乎遇到了问题，请原始代码工作正常，旨在使用.each方法执行，并调用setTranstion函数。

但是，新开发的代码无法执行相同的代码。结果，我尝试将原始代码转换为javascript对象，但未定义变量$ selector。

codepen链接：https://codepen.io/paul-solomon/pen/yjBEpz

请参见以下内容：

    Original Code
    ============================================= 

   //Global Vars
   $HvrContainer = $(".container-hover ,.transition- 
   hover,.transition h3");

   function setTransition(id, prop, delay, style) {
   $(id).css({ "-webkit-transition": prop + " " + 
   delay + " " + style });
   $(id).css({ "-moz-transition": prop + " " + delay 
   + " " + style });
   $(id).css({ "-o-transition": prop + " " + delay + 
   " " + style });
   $(id).css({ transition: prop + " " + delay + " " + 
   style });
   }

   //Module Controller for Sweep Classes
   $($HvrContainer).each(function() {

   $selector = $HvrContainer //Class or Id
   $transition = "all";  //Sets Option for Transition 
   $speed = ".3s"; //Sets Option for Speed  
   $FX =  "ease-in-out"; //Sets Option for Easing   

   setTransition ($selector, $transition, $speed 
  ,$FX);
   });


   New Code 
   ==============================================

   //Global Vars
   $HvrContainer = $(".container-hover ,.transition- 
   hover,.transition h3");

   function setTransition(id, prop, delay, style) {
   $(id).css({ "-webkit-transition": prop + " " + 
   delay + " " + style });
   $(id).css({ "-moz-transition": prop + " " + delay 
   + " " + style });
   $(id).css({ "-o-transition": prop + " " + delay + 
   " " + style });
   $(id).css({ transition: prop + " " + delay + " " + 
   style });
    }

   var fxController = {
   $selector : $HvrContainer,//Class or Id
   $transition : "all",  //Sets Option for Transition 
   $speed : ".3s", //Sets Option for Speed  
   $FX :  "ease-in-out", //Sets Option for Easing 
   $animationFX : function() {
   $($HvrContainer).each(function() {
    setTransition ($selector, $transition, $speed 
  ,$FX);
  })
 }
}

fxController。$ animationFX（）;

Answer 1

首先，JS中的所有Function都是对象，因此这里不需要转换。查看您的代码，我可以知道您正在尝试使对象 fxController 具有方法 $ animationFX ，并且该方法需要使用 setTransition 功能。在方法内部，您需要记住上下文，在尝试访问对象的属性时，需要使用 this 来解决它们（不要忘记保存对象的上下文））。

因此您的代码将如下所示：

$HvrContainer = $(".container-hover ,.transition-hover,.transition h3");

function setTransition(id, prop, delay, style) {
$(id).css({ "-webkit-transition": prop + " " + delay + " " + style });
$(id).css({ "-moz-transition": prop + " " + delay + " " + style });
$(id).css({ "-o-transition": prop + " " + delay + " " + style });
$(id).css({ transition: prop + " " + delay + " " + style });
}

var fxController = {
  $selector : $HvrContainer,//Class or Id
  $transition : "all",  //Sets Option for Transition 
  $speed : ".3s", //Sets Option for Speed  
  $FX :  "ease-in-out", //Sets Option for Easing 
  $animationFX : function() {
    $(this).each(function() { //Iterates over the object FxController
      setTransition (this.$selector, this.$transition, this.$speed, this.$FX);
    });
  }
};
fxController.$animationFX();

将函数转换为Javascript对象

1 个答案: