访问嵌套对象文字对象undefined?

时间:2013-01-08 21:12:21

标签: javascript jquery forms object-literal

所以我在对象文字模式方面非常陌生,但对这种模式及其提供的组织感到非常兴奋。

我尝试做的是即时更新电话号码表单字段,以便在用户输入时格式化(### - ### - ####)。但是,我想使格式化功能成为一种可重用的实用程序,因此我可以相应地将其分配给其他输入,而无需每次都重写函数的功能......一直尝试使用Object Literal模式

我有一个小提琴设置http://jsfiddle.net/JF3Vh/3/

这是我迄今所拥有的......谨慎学习进展......

HTML

<div id="contactPage">
  <form>

    <label id="lblPhone" for="txtPhone">Your Phone Number:</label>
    <input id="txtPhone" name="phone" type="tel"/>                      

  </form>
</div>

使用jQuery的JavaScript

var appMobile = {

    utilities: {

        formatPhone : function(){
            alert( "formatPhone is running" );
            $( this ).val().replace(/(\d{3})(\d{3})(\d{4})/, "$1-$2-$3");
        }

    },
    page: {
    home : {function()
       //Some Page specific functions here
    },
    contactForm: function () {
            $( '#txtPhone' ).onchange(function() {
                $(this).appMobile.utilities.formatPhone();
            });
        },
    products : {function()
       //Some Page specific functions here
    },


    }


};


$( document ).ready( function () {

    /*--initialize Scheduling page function--*/
    if ( $( '#contactPage' ) ) { appMobile.page.contactForm(); }

} );

让我直截了当,谢谢! :)

WizzyBoom

1 个答案:

答案 0 :(得分:0)

我相信这就是你想要的:

var appMobile = {
    utilities: {
        formatPhone: function(){
            alert( "formatPhone is running" );
            $( this ).val().replace(/(\d{3})(\d{3})(\d{4})/, "$1-$2-$3");
        }
    },
    page: {
        home: function() {
           //Some Page specific functions here
        },
        contactForm: function () {
            $('#txtPhone').on('change', appMobile.utilities.formatPhone);
        },
        products: function() {}
           //Some Page specific functions here
        }
    }
};

$(function () {
    if ($('#contactPage').length) { 
        appMobile.page.contactForm(); 
    }
});

另外,您可能对this屏蔽编辑插件感兴趣。