Question

我终于学习如何获取一个巨大的$（文档）.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() ));

感谢任何帮助。

== UPDATE == 这是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) {

调用它时会自动传递给你的函数。

Answer 2

应该是：

showOther: function(e) {
    var val =  $(this).val();
    if( e.keyCode == 13 && val.length > 0){
        $('#main_content').hide();
        $('#other_content').show();
}

如您所见，命名函数与原始匿名函数相同。

更新：

如果要对非按键事件使用showOther，可以按照定义的方式保留该功能，并将绑定更改为：

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

您需要使用此IIFE从局部变量this中的对象捕获that的值，因为当调用事件处理程序时，that将被设置为目标事件。

将document.ready重构为Object

2 个答案: