jquery - 将 document.ready 重构为 Object

Question

我终于学习如何获取巨大的 $(document).ready() 并将其重构为可读且可管理的对象。我目前正在重构处理程序，但找不到有关如何处理参数的任何信息。

在document.ready中，我有这个函数:

$('#corporate_addressbook').on('keypress', '#corp_search', function(e){
    var val =  $(this).val();
    if( e.keyCode == 13 && val.length > 0){
        $('#main_content').hide();
        $('#other_content').show();
    } // end if
});

我可以将其重构为

$('#corporate_addressbook').on('keypress', '#corp_search', this.showOther);

并将方法 showOther 添加为:

showOther: function(){
    $('#main_content').hide();
    $('#other_content').show();
}

我迷失的是如何/在哪里检查回车键以及是否有像原始事件处理程序中那样的值。

由于我需要传递事件和值，因此我尝试但失败了:

$('#corporate_addressbook').on('keypress', '#corp_search', this.showOther(evt, $('#corp_search').val() ));

感谢任何帮助。

==更新==这是 HTML:

<div id="main_content">
    <div id="main_left" style="float:left; width: 65%; min-height:100px; padding:10px 10px 0 20px;">
         <div id='edr_news' class='edr_web_part'>
        <h1>LATEST <span class='thickTtl'>NEWS</span></h1>
        <div class='ewp_inner'></div>
         </div> <!-- /#edr_news -->

         <div id='corp_cal' class='edr_web_part'>
        <h1>EdR <span class='thickTtl'>CALENDAR</span></h1>
            <div class='ewp_inner'></div>
         </div> <!-- /#corp_cal -->
    </div> <!-- /#main_left -->
    <div id="main_right" style="float:right; width:30%; min-height:100px; padding:10px 10px;">
        <div id='corporate_addressbook' class='edr_web_part'>
            <h1>CORPORATE <span class='thickTtl'>DIRECTORY</span></h1>
                <div class='ewp_inner'>
                    <span class='book_instructions'>Search by First and/or Last Name</span>
                    <form id="frm_corp_search">
                        <input id='corp_search' class='searchBar' style='width:83%;' />&nbsp;&nbsp;&nbsp;
                        <img src='/SiteAssets/find.png' alt='find' id='btnFindCorp' />
                    </form>
                    <div id='corp_show'></div>
                </div>
        </div> <!-- /#corporate_addressbook -->
        <div id='property_addressbook' class='edr_web_part'>
            <h1>PROPERTY <span class='thickTtl'>DIRECTORY</span></h1>
            <div class='ewp_inner'>
                <span class='book_instructions'>Search by Property Number or Staff Name</span>
                <form id="frm_prop_search">
                    <input id='prop_search' class='searchBar' style='width:83%;' />&nbsp;&nbsp;&nbsp;
                    <img src='/SiteAssets/find.png' alt='find' id='btnFindProp' />
                </form>
                <div id='prop_show'></div>
            </div>
        </div> <!-- /#property_addressbook -->
        <div id='edr_links' class='edr_web_part'>
            <h1>IMPORTANT <span class='thickTtl'>LINKS</span></h1>
            <div class='ewp_inner'>
                <ul></ul>
            </div>
        </div> <!-- /#edr_links -->
    </div> <!-- /#main_right -->
</div> <!-- /#main_content -->

<div id="other_content" style="display:none;">
    <div id="other_left" style="float:left; width: 100%; padding:0 10px 0 20px;">
        <h1>Other Content</h1>
        <button id="btnGoHome">HOME</button>
    </div>
</div>

和我的整个 main.js

var home = {
    init: function(){
        //remove target='_blank' from Paid Holidays
        $('#edr_links').find('a:contains("Paid Holidays")').attr("target", "");

        $('.ms-core-sideNavBox-removeLeftMargin').css('display', 'none');
        $('#contentBox').css('margin-left', '0' );

        $('#btnFindCorp').on('click', this.showOther);
        $('#btnFindProp').on('click', this.showOther);

        $('#btnGoHome').on('click', this.showHome);

        $('#corporate_addressbook').on('keypress', '#corp_search', function(e){
            var val =  $(this).val();
            if( e.keyCode == 13 && val.length > 0){
                this.showOther;
            } // end if
        });

        $('#property_addressbook').on('keypress', '#prop_search', function(e){
            var val = $(this).val();
            if( e.keyCode == 13 &&  val.length > 0){
                this.showOther;
            } // end if
        });
    },

    showOther: function(){
        $('#main_content').hide();
        $('#other_content').show();
    },

    showHome: function(){
        $('#other_content').hide();
        $('#main_content').show();
    }
};

$(document).ready( function(){
    home.init();
});

我不再使用任一输入的回车键触发任何内容。

再次感谢大家帮助我学习这个!!!

Answer 1

更改您的 showOther 函数以接受 event 参数:

showOther: function(e) {

这将在调用时自动传递给您的函数。