尝试通过嵌套函数在对象中存储值

Question

我一直在尝试遵循最佳实践并在一个对象中包含我的函数等。

目标是尝试在调用时运行2个方法，一个在初始化时获得初始值...然后用另一个方法在用户单击计算按钮执行简单计算时运行在最初的初始值上。

问题是，即使我已经将这些方法包装在一个匿名函数中，他们应该按照我的理解引用父对象属性的值。在init中它正确地设置它，并且在值上执行输出表明它为前例获取了正确的值77。

于是我想到，现在同时仍保持在同一页上，myObj.beginVal应该改变之前有77一致的值..

然而，当我运行“计算”它不具有价值，但初始NULL值。 我想它的价值被任何由初始化函数，在这种情况下是77

没有页面正在重新加载设置，并且我已经试过放置myObj对象的创建内部和文档准备与外同样的结果......我也希望在其他方法试图访问它时保持它的价值。

我该如何做到这一点？我究竟做错了什么？

任何帮助将不胜感激！

myObj = {}; 

$(document).ready(function(){ 

    myObj = {    
     beginVal : null, //initial value... 

     init : function(evt) { 

      $("#openCalculatorButton").bind("click", function() { 

      myObj.beginVal = $($(this).parent().attr('id')); // 77 

      $.fancybox.showActivity(); 

      $.ajax({ 
       type : "POST", 
       cache : false, 
       url  : "/calc.php", 
       data : myObj, 
       success : function(data) { 
        $.fancybox({ 
         'content' : data 
        }); 
       } 
      }); 

      return false; 
      }); 
     }, // function(evt)        


     calculate : function(evt) { 

      console.log(myObj.beginVal); // null 

      $('#getAnswerButton').click(function(){ 
       // Need the value of myObj.beginVal to be retained and at this point be 77! but it is NULL!   

       myObj.answer = myObj.beginVal * 3.16; // Create prop and set value of the original object 

       return false; 
      }); 

     } 

    }// calc 
}); 

Answer 1

你应该绑定点击处理程序与文档准备

myObj = {    
     beginVal : null, //initial value... 
     answer : null 
     init : function(id){ 

      this.beginVal = id; 

      $.fancybox.showActivity(); 

      $.ajax({ 
       type : "POST", 
       cache : false, 
       url  : "/calc.php", 
       data : myObj, 
       success : function(data) { 
        $.fancybox({ 
         'content' : data 
        }); 
       } 
      }); 
     } 
     calc : function(){ 

      if (!!this.beginVal){ //check to see if beginVal is not null 
       tis.answer = this.beginVal * 3.16; // Create prop and set value of the original object 
      } 
     } 

} 

$(document).ready(function(){ 

     $("#openCalculatorButton").bind("click", function() { 

      myObj.init($($(this).parent().attr('id'))); // 77 

     }); 

     $('#getAnswerButton').click(function(){ 

      myObj.calc(); 

     }); 

}); 

Answer 2

的init和calc功能在你的对象交互是我工作的罚款。

myObj = {}; 
$(document).ready(function(){ 
    myObj = {    
     beginVal : null, //initial value... 
     init : function(evt) { 
      myObj.beginVal = 77; // 77 
      return false; 
     }, // function(evt)        
     calculate : function(evt) { 
      alert(myObj.beginVal); 
      myObj.answer = myObj.beginVal * 3.16; // Create prop and set value of the original object 
      return false; 
     } 
    } 

    myObj.init(); 
    myObj.calculate(); 
}); 

看来你的问题是在ajax调用或绑定函数或点击函数。

DEMO

Answer 3

这种方法允许你重用代码，实例多的计算器，如果你想要的。

$(document).ready(function(){ 

    var calculator = function(initVal, calcButtonID, ansButtonID) {    
      val : initVal, //initial value... 
      calcID: calcButtonId, 
      ansID: ansButtonID, 
      answer: null, 
      init : function() { 
         $("#" + calcID).bind("click", function() { 
          $.fancybox.showActivity(); 

          $.ajax({ 
           type : "POST", 
           cache : false, 
           url  : "/calc.php", 
           data : this.val, 
           success : function(data) { 
            $.fancybox({ 
             'content' : data 
            }); 
           } 
          }); 

         }); 

         $('#' + ansID).bind('click', this.calculate()); 
      },       


      calculate : function() { 
       this.answer = this.val * 3.16; 
       return this.answer; 

      } 

     } 

    var myCalc = new calculator($($(this).parent().attr('id')), 
          'openCalculatorButton', 
          'getAnswerButton'); 

    //Usage 
    var someAnswer = myCalc.calculate(); 
});