Question

目前要将我的代码保存在一个对象中，我想将click事件的内容转换为方法，但不能过分确定如何完成。当前代码如下所示：

当前的JS

init: function(){

            var _this = this,
                slides_li = _this.els.slides.children(),
                large = 260,
                small = 60;

            // Hover
            slides_li.on('mouseover', function(){
                $(this).stop(true, true).animate({ opacity: 1 }, 300);
            }).on('mouseout', function(){
                $(this).stop(true, true).animate({ opacity: .8 }, 300)
            });

            // Click handlers
            slides_li.on('click', function(){

//想将此代码移动到自己的方法toggle_slides（）??

                $('.active', _this.els.slides).not(this).animate({
                    width: small
                }, 300).removeClass('active');
                // animate the clicked one

                if ( !$(this).hasClass('active') ){
                    $(this).animate({
                        width: large
                    }, 300).addClass('active');
                }                
            });                 
        }

但我希望代码看起来像这样，但我知道我缺少一些关键的东西加上这显然并不意味着点击的事件：

JS

init: function(){

            var _this = this,
                slides_li = _this.els.slides.children(),
                large = 260,
                small = 60;

            // Hover
            slides_li.on('mouseover', function(){
                $(this).stop(true, true).animate({ opacity: 1 }, 300);
            }).on('mouseout', function(){
                $(this).stop(true, true).animate({ opacity: .8 }, 300)
            });

            // Click handlers
            slides_li.on('click', function(){
                toggle_slides(); //pass in this?
            });                 
        },
        toggle_slides: function(){ // add argument for this?
               $('.active', _this.els.slides).not(this).animate({
                    width: small
                }, 300).removeClass('active');
                // animate the clicked one

                if ( !$(this).hasClass('active') ){
                    $(this).animate({
                        width: large
                    }, 300).addClass('active');
                }                
        }

有人可以就如何使这项工作提出一些建议吗？

Answer 1

问题在于＆＃39;这个＆＃39;

的依赖于环境的价值。

首先，关于原始代码如何工作的说明：

最初调用init（）时，this引用父对象（gep）。但在click事件处理程序中，this引用了单击的元素。因此，您仍然可以在点击处理程序中访问父级，您可以捕获此＆＃39;的父级值。进入_this，以便以后可以使用它 - 一切正常。

但是当您将处理程序中的代码移动到单独的方法中时，会发生很多变化：

首先，小型，大型和其他变量不再属于本地范围，因此必须重新定义或作为参数导入。
this现在再次引用父元素，因为现在执行的方法不是事件处理程序，而是父元素上的方法。因此，旧代码中对_this的引用只能在新代码中使用this。
最后，在旧代码中，在事件处理程序中，this引用了被单击的元素。但是（见上文）在新方法中，这意味着不同的东西：父母＆＃39;宾语。因此，我们需要一个参数来捕获所点击的元素 - 我已将其作为el参数传递，旧代码中对this的引用会相应更改。

所以需要注意的是：这段代码属于哪个对象？如果将属于一个对象的代码移动到另一个对象 - 例如。从一个对象上的事件处理程序到另一个对象上的方法 - 您可能需要根据需要重新编写/重命名任何此类或类似的变量。

更新后的代码的带注释的副本如下，也可以jsfiddle：

的形式提供

...
        // Click handlers
        slides_li.on('click', function(){
            // pass 'this' - the clicked element - as the el param; also small and large.
            gep.toggle_slides(this, small, large);
        });                 
    },

    toggle_slides: function(el, small, large){
           // '_this' in old code in handler replaced with 'this';
           // 'this' in handler code replaced with 'el' here
           $('.active', this.els.slides).not(el).animate({
                width: small
            }, 300).removeClass('active');
            // animate the clicked one

            // 'this' in handler code replaced with 'el'here
            if ( !$(el).hasClass('active') ){
                $(el).animate({
                    width: large
                }, 300).addClass('active');
            }                
    }

将代码片段转换为javascript中的方法

1 个答案: