jquery 怎么封装函数给3组demo使用，点击时互不影响

Question

我写的jquery，三组demo一起切换，我想到封装函数，可是我忘记怎么写了。 求讲师。非常感谢回答者 /鞠躬

求贴代码，或者案例。谢谢啦。

$('document').ready(function() {
    // 设置这些div为JavaScipt浏览器显示
    $('.gallery_data').css('display','block');
    $('.gallery_preview').css('display','block');
    $('.gallery_caption').css('display','block');
    
    // 捕捉缩略图链接
    $('.gallery_thumbnails a').click(function(e){
        // 禁用标准链接行为
        e.preventDefault();
        
        // 基于链接的缩略图设置变量
        var photo_caption = $(this).attr('title');
        var photo_fullsize = $(this).attr('href');
        var photo_classify= $(this).data('classify'); 
        console.log(photo_fullsize);

        var photo_preview = photo_fullsize.replace("_fullsize", "_preview");

        // 淡出预览,预加载新形象,淡化预览  imgpreload
        $('.gallery_caption').slideUp(500);
        $('.gallery_preview').fadeOut(500, function(){

            $('.gallery_preload_area').html('<img src="'+photo_preview+'" />');
            $('.gallery_preload_area img').imgpreload(function(){
                $('.gallery_preview').html('<a class="overlayLink" title="'+photo_caption+'" data-classify="'+photo_classify+'" href="'+photo_fullsize+'" style="background-image:url('+photo_preview+');"></a>');
                $('.gallery_preview').fadeIn(500);
                $('.gallery_caption').html('<a class="name" href="'+photo_fullsize+'">'+photo_caption+'</a><p class="field">'+photo_classify+'</p>');
                $('.gallery_caption').slideDown(500);
                updateThumbnails();
            });

        });
        $(this).addClass('active').siblings().removeClass('active');
    });
    
    // 设置第一个预览图像
    var first_photo_caption = $('.gallery_thumbnails a').first().attr('title');
    var first_photo_fullsize = $('.gallery_thumbnails a').first().attr('href');
    var first_photo_classify = $('.gallery_thumbnails a').first().data('classify');
    var first_photo_preview = first_photo_fullsize.replace("_fullsize", "_preview");
    $('.gallery_preview').html('<a class="overlayLink" title="'+first_photo_caption+'" data-classify="'+first_photo_classify+'" href="'+first_photo_fullsize+'" style="background-image:url('+first_photo_preview+');"></a>');
    $('.gallery_caption').html('<a class="name" href="'+first_photo_fullsize+'">'+first_photo_caption+'</a><p class="field">'+first_photo_classify+'</p>');
    updateThumbnails();

});



function updateThumbnails(){
    $('.gallery_thumbnails a').each(function(index){
        
        if ( $('.gallery_preview a').data('href') == $(this).attr('href') ){
            $(this).addClass('selected');
            $(this).children().fadeTo(250, .4);
        }else {
            $(this).removeClass('selected');
            $(this).children().css('opacity', '1');
        }
    });
    
}

Answer 1

把需要执行的方法，效果封装为一个方法如：var action = function(element){     //do action }; //参数为需要在其上执行操作的元素，调用方法如： action($(".element1"));这样一封装，让其他事件调用的时候如：$(".demo").each(function(){     var btn = $(this).find(".button");     btn.on("click",function(){         action($(this));     }); });这样就可以了。