javascript - 切换回来并强制多个 css 元素的优雅方式

Question

我有 2 个按钮，id 为“videos-button”和“photos-button”。单击每个按钮时，我需要执行一组操作来更改 css 或删除/添加某些 HTML 元素的类。基本上，对于每个元素，我需要切换它们的初始状态。详情见代码:

$('#videos-button').on('click',function(){
            $("#ib-row").css({'display':'none'});
            $("#ib-pagination").css({'display':'none'});
            $("#ib-video-carousel-pagination").css({'display':'block'});
            $("#ib-video-carousel").css({'display':'block'});
            $("#photos-button").removeClass('image-block-media-button-selected');
            $("#videos-button").addClass('image-block-media-button-selected');
});


$('#photos-button').on('click',function(){
            $("#ib-row").css({'display':'block'});
            $("#ib-pagination").css({'display':'block'});
            $("#ib-video-carousel-pagination").css({'display':'none'});
            $("#ib-video-carousel").css({'display':'none'});
            $("#videos-button").removeClass('image-block-media-button-selected');
            $("#photos-button").addClass('image-block-media-button-selected');
        });

如何以更优雅的方式重构它而不重复？

Answer 1

重构的一种方法是，创建一个函数，它将视频按钮或照片按钮作为输入并返回一个对象( map )的 id 和相应的类。即函数(我们称之为 getClassMap)返回

{ '#id-row' : 'display: none', ... } 

当 i/p 是视频按钮和

{ '#id-row' : 'display: block', ... }

当 i/p 是照片按钮时。 然后移动应用类的逻辑即

function applyStyles(id) {
    const styleIdMap = getClassMap(id);
    $("#ib-row").css(styleIdMap["#ib-row"]);
    $("#ib-pagination").css(styleIdMap["#ib-pagination"]);
    ...
}

这样逻辑上就没有重复了。