Question

我有以下函数来淡入和淡出无序列表的每一行。现在它适用于#skills_hints但我想将它用于其他#named_hints。有没有办法可以在多个无序列表上重复使用此代码，而无需复制和粘贴整个代码并只更改ID？

$(document).ready(function(){
    $('#skills_hints .hint');
    setInterval(function(){
        $('#skills_hints .hint').filter(':visible').fadeOut(800,function(){
            if($(this).next('li.hint').size()){
                $(this).next().fadeIn(800);
            }
            else{
                $('#skills_hints .hint').eq(0).fadeIn(800);
            }
        });
    },7000);    
});

Answer 1

以下内容将完全按照您发布的内容执行，并且doit函数（您应该明显重命名）可以再次调用并再次传递不同的ID。

function doit(id){
    $('#'+id+' .hint');
    setInterval(function(){
        $('#'+id+' .hint').filter(':visible').fadeOut(800,function(){
            if($(this).next('li.hint').size()){
                $(this).next().fadeIn(800);
            }
            else{
                $('#'+id+' .hint').eq(0).fadeIn(800);
            }
        });
    },7000);    
}

$(function(){
   doit('skills_hints');
})

Answer 2

一个很好的技巧是把它变成一个闭包，如果你需要一个单独的函数来用作回调等等

function doit(id_name){
    var id = '#'+id_name + '.hint';
    return (function(){
        $(id);
        setInterval(function(){
            $(id).filter(':visible').fadeOut(800,function(){
                if($(this).next('li.hint').size()){
                    $(this).next().fadeIn(800);
                }
                else{
                    $(id).eq(0).fadeIn(800);
                }
             }
         },7000);
    })
}

//examples
doit_skills = doit('skills_hint');
doit();
doit_foo = doit('foo');
doit_foo()

names = ['a', 'b'];
for(var i=0; i<names.length; i++){
    doit(names[i])();
}

Answer 3

您可以将代码转换为jQuery插件（http://docs.jquery.com/Plugin）

将jQuery函数转换为易于重用而不重复

3 个答案: