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

Question

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

我们的目标是尝试让 2 个方法在调用时运行，一个在单击时初始化并获取起始值……然后在用户单击计算按钮时运行另一个方法以执行基于初始值。

问题是，即使我将这些方法包装在匿名函数中，据我所知，它们应该引用父对象属性的值。在 init 中，它正确设置了它，并且对 value 进行输出表明它为 ex 抓取了正确的 77 值。

然后我希望现在仍然在同一页面上，myObj.beginVal 在更改之前应该具有一致的值 77..

但是，当我运行“计算”时，它没有那个值，而是初始 NULL 值。 我希望它的值是 init 函数设置的值，在本例中为 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

此方法允许您重用代码，如果需要，可以实例化多个计算器。

$(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();
});

Answer 3

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