Question

我有2个ID为“视频按钮”和“照片按钮”的按钮。单击每个按钮后，我需要执行一组操作来更改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

一种重构的方法是，创建一个函数，该函数将视频按钮或照片按钮作为输入并返回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"]);
    ...
}

这种方式在逻辑上是无可奉告的。

Answer 2

您可以尝试以下方法：

const ibRowAndPagination = ['#ib-row', '#ib-pagination'];
const ibVideoCarouselAndPagination = ['#ib-video-carousel-pagination', '#ib-video-carousel'];
const photosAndVideosButtons = ['#photos-button', '#videos-button'];
const photosAndVideosButtonsToggleClass = () => photosAndVideosButtons.forEach(el => $(el).toggleClass('image-block-media-button-selected'));

$('#videos-button').on('click', function() {
  ibRowAndPagination.forEach(el => $(el).css({'display':'none'}));
  ibVideoCarouselAndPagination.forEach(el => $(el).css({'display':'block'}));
  photosAndVideosButtonsToggleClass();
});

$('#photos-button').on('click', function() {
  ibRowAndPagination.forEach(el => $(el).css({'display':'block'}));
  ibVideoCarouselAndPagination.forEach(el => $(el).css({'display':'none'}));
  photosAndVideosButtonsToggleClass();
});

退回并强制使用多个CSS元素的优雅方式

2 个答案: