0

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

当前的 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');
                }                
        }

任何人都可以就如何使这项工作提供一些建议吗？

4

1 回答 1

2

问题是“this”的依赖于上下文的值。

首先，关于原始代码如何工作的注释：

最初调用 init() 时，this指的是父对象 (gep)。但是在点击事件处理程序中，this指的是被点击的元素。这样您仍然可以在单击处理程序中访问父级，您将“this 的父级值”捕获到 中_this，以便以后使用它 - 一切正常。

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

  • 首先，小变量、大变量和其他变量不再在本地范围内，因此必须重新定义或作为参数导入。

  • thisnow 再次引用父元素，因为现在执行的方法不是事件处理程序，而是父元素上的方法。所以_this旧代码中的引用只能this在新代码中使用。

  • 最后，在旧代码中，在事件处理程序中，this引用了被单击的元素。但是（见上文）在新方法中，这意味着不同的东西：“父”对象。所以我们需要一个参数来捕获点击的元素——我已经将它作为参数传递了，旧代码中的el引用也会相应地改变。this

所以真正要注意的是：这段代码属于什么对象？如果您将属于一个对象的代码移动到另一个对象 - 例如。从一个对象上的事件处理程序到另一个对象上的方法 - 您可能需要根据需要重新处理/重命名任何 this 或类似 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');
            }                
    }
于 2012-06-13T09:55:31.940 回答