javascript - 新手请教，如何将一段JS代码封装成一个方法？

Question

$("#plate-1").mouseenter(function() {
    $("#plate-1hover").addClass("plate-1after")
}).mouseout(function(){
    $("#plate-1hover").removeClass("plate-1after")
});

$("#plate-2").mouseenter(function() {
    $("#plate-2hover").addClass("plate-2after")
}).mouseout(function(){
    $("#plate-2hover").removeClass("plate-2after")
});

$("#plate-3").mouseenter(function() {
    $("#plate-3hover").addClass("plate-3after")
}).mouseout(function(){
    $("#plate-3hover").removeClass("plate-3after")
});

$("#plate-4").mouseenter(function() {
    $("#plate-4hover").addClass("plate-4after")
}).mouseout(function(){
    $("#plate-4hover").removeClass("plate-4after")
});

$("#plate-5").mouseenter(function() {
    $("#plate-5hover").addClass("plate-5after")
}).mouseout(function(){
    $("#plate-5hover").removeClass("plate-5after")
});

$("#plate-6").mouseenter(function() {
    $("#plate-6hover").addClass("plate-6after")
}).mouseout(function(){
    $("#plate-6hover").removeClass("plate-6after")
});

$("#plate-7").mouseenter(function() {
    $("#plate-7hover").addClass("plate-7after")
}).mouseout(function(){
    $("#plate-7hover").removeClass("plate-7after")
});

如上面所示，小弟想将上面的JS代码封装成一个JS方法。但是没有思路，不知道该怎么下手，请大神们指点一下。能有范例最好。

注：这段JS代码是一段特效代码，效果是鼠标移入移出的动画效果。原理是移除dom上的class样式

Answer 1

dom呢，贴出来看看

Answer 2

提供思路：

for (var i = 1; i <= 6; i++) {
    (function(j) {
        $("#plate-" + j).mouseenter(function() {
            $("#plate-" + j + "hover").addClass("#plate-" + j + "after")
        }).mouseout(function() {
            $("#plate-" + j + "hover").removeClass("#plate-" + j + "after")
        });
    })(i)
}

Answer 3

封装程度浅(面向过程)：

function f( ele ) {
    //第一个是要操作的dom元素
    
    $(ele).mouseenter(function() {
        $(ele+"hover").addClass(ele+"after")
    }).mouseout(function(){
        $(ele+"hover").removeClass(ele+"after")
    });
}
//然后用循环进行绑定事件

封装程度深(面向对象)：

function Binde( ele, length ) {
    this.f = function( ele ) {
        $(ele).mouseenter(function() {
            $(ele+"hover").addClass(ele+"after")
        }).mouseout(function(){
            $(ele+"hover").removeClass(ele+"after")
        });
    };
    
    for( var i = 0; i < length; i ++ ) {
        this.f( ele + i );
    }
}

Answer 4

写了个DEMO http://runjs.cn/code/izmm52sc

Answer 5

$("selector[id|='plate']").mouseenter(function(){

  $("#"+$(this).attr("id")+"hover").addClass("")
}).mouseout(function(){
  $("#"+$(this).attr('id')+"hover").removeClass("")
})

selector是你标签名,我不知你的标签
不封装也是可以解决的。。

Answer 6

鉴于楼主欠缺编程经验，我就先不说封装成jQuery插件等高大上的做法了。单就论封装成方法而言。

方法，也就是函数。是面向过程式语言一种代码复用的初级手段，简而言之，就是把重复的部分用函数封装起来。

例如猫叫多遍，cat.meow(), 你总不可能写对应次数的代码，一般会写成：

function meow(num){
    for(var i=0;i<num;i++){
        cat.meow()
    }
}

meow(1000)

这就是一种最基础的代码复用。
当然，面向对象的语言也许有更简单的 cat.meow(1000)

那么，针对楼主的情况。逐步讲一下各层次的方法。最简单的用函数封装一下就是：

function effect(srcDom,destDom,className){
    $(srcDom).mouseenter(function(){
        $(destDom).addClass(className)
    }).mouseout(function(){
        $(destDom).removeClass(className)
    })
}

然后调用

effect('#plate-1','#plate-1hover','plate-1after')
effect('#plate-2','#plate-2hover','plate-2after')
effect('#plate-3','#plate-3hover','plate-3after')

鉴于楼主的DOM的ID和Class命名比较有规律，可以写成这样

function effect(name){
    $('#'+name).mouseenter(function(){
        $('#'+name+'hover').addClass(name+'after')
    }).mouseout(function(){
        $('#'+name+'hover').removeClass(name+'after')
    })
}

然后调用

effect('plate-1')
effect('plate-2')
effect('plate-3')

但是这样还是不够通用，楼主应该看看事件方面有关事件委托的知识

事件委托

事件委托要结合具体的DOM结构来看。假设有这样的一个结构：

<p class="wrap">
    <p class="box1">
        <span class="trigger">trigger</span>
        <p class="effect"></p>
    </p>
    <p class="box2">
        <span class="trigger">trigger</span>
        <p class="effect"></p>
    </p>
    <p class="box3">
        <span class="trigger">trigger</span>
        <p class="effect"></p>
    </p>
</p>

function effect(node){
    $(node).on('mouseenter','.trigger',function(){
        var $this=$(this);
        $this.parent().find('.effect').addClass('after')
    })
    $(node).on('mouseout','.trigger',function(){
        var $this=$(this);
        $this.parent().find('.effect').removeClass('after')
    })
}

这样，调用时就只需要调用一次。

effect('.wrap')

当然，这里假设是每组控件的效果都相似，如果不同，有两种解决方案：1.利用box父级class从样式层面解决。2.js层面多加一个配置项参数

Answer 7

按你的思路可以这样写：

function addEvent(selector,n){
    for (var i=1;i<=n;i++){
        (function(){
                $(selector +"-"+i).mouseenter(function() {
                    $(selector +"-"+i+"hover").addClass(selector +"-"+i+"after")
                }).mouseout(function(){
                    $(selector +"-"+i+"hover").removeClass(selector +"-"+i+"after")
                });
            }
        })(i);        
}

addEvent('#plate',7);

思路是循环所有要绑定事件的元素，为他们添加相应的事件。注意这里使用了在每次循环中使用了闭包以确保i的指向正确。
但是不建议这样做，因为如果plate元素比较多的话将会绑定很多事件。

建议通过事件代理的方式：

$(document).on('mouseover',function(e){
    if ($(e.target).hasClass('plate')){
        //为鼠标移入的plate添加class
        //例如:$("#plate-"+$(e.target).index()+"hover").addClass("#plate-"+$(e.target).index()+"after")
    }
});
$(document).on('mouseout',function(e){
    if ($(e.target).removeClass('plate')){
        //为鼠标移出的plate移除class
    }
});

这种方式只需要绑定两个事件处理函数。
触发时判断鼠标是否移入了目标块(因为不知道你的dom结构，所以这里没有详细写。建议为他们加上统一的class方便判断)。当然此处事件应该绑定到plate元素的父元素上面而不是document，以减少不必要事件的触发
然后通过$(e.target)可以选取到触发的dom，然后加上相应的class。

这里要注意mouseenter和mouseover，mouseleave和mouseout的区别。参见：MDN Mouse Event部分

Answer 8

http://www.cnblogs.com/Wayou/...

Answer 9

建议把dom一起贴出来

Answer 10

前端进阶之路：点击事件绑定: https://github.com/cssmagic/b...