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");
问题解决了，添加这句话就可以了
var $card = $(this).parents('.card');
        // 淡出预览,预加载新形象,淡化预览  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

用模块化，每个 demo 的代码都写成一个模块。

或者，用 IIFE

Answer 2

通过原型链进行继承不就行了，