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));
    });
});

这样就可以了。