Question

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

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

问题是即使我将这些方法包装在一个匿名函数中，他们也应该根据我的理解它引用父对象属性的值。在init中它正确设置它并在值上输出显示它为前者获取了正确的值77。

然后我希望现在仍然在同一页面上，myObj.beginVal应该具有77的一致值，直到更改为止。

但是，当我运行'calculate'时，它没有该值，而是初始的NULL值。我希望它的值是init函数设置的值，在这种情况下是71。

没有正在重新加载的页面，我已经尝试在doc内部和外部创建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

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

3 个答案: