如何合并两个仅选择器与隐藏元素不同的jQuery语言切换脚本？

当然可以简化！你的两个脚本核心逻辑完全一致，只是需要隐藏的元素集合和**目标元素的选择器类型（id/class）**这两点不同，我们可以通过扩展函数参数或者用配置对象的方式，把它们合并成一个更简洁、易维护的脚本。

先回顾一下你提供的两个原始脚本：

原始脚本 #

Script 1（针对ID元素） #

var display = function(block_name, title) { $('.CENTER').css('display', 'none'); $('#' + block_name + '').css('display', 'block');}
$('.UK').on('click', function() {display('LUK', $(this)); });
$('.ES').on('click', function() { display('LES', $(this)); });
$('.FR').on('click', function() { display('LFR', $(this)); });

Script 2（针对Class元素） #

var display = function(block_name, title) { $('.info, .frames, .button').css('display', 'none'); $('.' + block_name + '').css('display', 'block'); }
$('.UK').on('click', function() { display('LUK', $(this)); });
$('.ES').on('click', function() { display('LES', $(this)); });
$('.FR').on('click', function() { display('LFR', $(this)); });

简化方案 #

这里提供两种实用的合并方式，你可以根据实际场景选择：

方式一：给display函数新增参数 #

直接给核心函数添加两个参数：hideSelectors（需要隐藏的元素选择器）和targetType（目标元素是id还是class），这样就能在同一个函数里处理两种场景：

// 通用版display函数，适配两种场景
var display = function(hideSelectors, targetType, block_name, title) {
  // 隐藏指定元素
  $(hideSelectors).css('display', 'none');
  // 根据目标类型拼接选择器，显示目标元素
  var targetSelector = targetType === 'id' ? '#' + block_name : '.' + block_name;
  $(targetSelector).css('display', 'block');
};

// 绑定原Script1的逻辑（隐藏.CENTER，目标为ID）
$('.UK').on('click', function() { display('.CENTER', 'id', 'LUK', $(this)); });
$('.ES').on('click', function() { display('.CENTER', 'id', 'LES', $(this)); });
$('.FR').on('click', function() { display('.CENTER', 'id', 'LFR', $(this)); });

// 绑定原Script2的逻辑（隐藏.info/.frames/.button，目标为Class）
// 注意：如果这部分的触发按钮和上面重复，建议给按钮加额外类区分，比如.language-class
$('.language-class.UK').on('click', function() { display('.info, .frames, .button', 'class', 'LUK', $(this)); });
$('.language-class.ES').on('click', function() { display('.info, .frames, .button', 'class', 'LES', $(this)); });
$('.language-class.FR').on('click', function() { display('.info, .frames, .button', 'class', 'LFR', $(this)); });

方式二：用配置对象统一管理（更优雅） #

如果后续可能新增更多语言或场景，用配置对象统一管理会更清晰，把所有差异项都集中在配置里：

// 统一配置：把不同场景的差异参数都放在这里
var langSwitchConfig = {
  idScenario: {
    hideElements: '.CENTER',
    targetType: 'id',
    langMapping: { UK: 'LUK', ES: 'LES', FR: 'LFR' }
  },
  classScenario: {
    hideElements: '.info, .frames, .button',
    targetType: 'class',
    langMapping: { UK: 'LUK', ES: 'LES', FR: 'LFR' }
  }
};

// 通用切换函数
var switchLanguage = function(config, langKey, title) {
  $(config.hideElements).hide(); // 用hide()替代css('display','none')更简洁
  var targetSelector = config.targetType === 'id' ? '#' + config.langMapping[langKey] : '.' + config.langMapping[langKey];
  $(targetSelector).show(); // 同理用show()替代css('display','block')
};

// 绑定ID场景的点击事件
var idConfig = langSwitchConfig.idScenario;
Object.keys(idConfig.langMapping).forEach(lang => {
  $(`.${lang}`).on('click', function() {
    switchLanguage(idConfig, lang, $(this));
  });
});

// 绑定Class场景的点击事件（假设按钮有.class-scenario类标识）
var classConfig = langSwitchConfig.classScenario;
Object.keys(classConfig.langMapping).forEach(lang => {
  $(`.class-scenario.${lang}`).on('click', function() {
    switchLanguage(classConfig, lang, $(this));
  });
});

额外优化小建议 #

1. 你原脚本里的title参数没有被使用，如果不需要可以直接去掉，简化函数。
2. 用jQuery的hide()和show()方法替代手动设置display属性，代码更简洁且兼容性更好。
3. 如果两种场景的触发按钮是同一批，可以给按钮加data-*属性（比如data-scenario="id"）来标记对应场景，这样不用写重复的绑定代码，示例如下：

// 简化的data属性版本
var langConfigs = {
  id: { hideElements: '.CENTER', targetType: 'id' },
  class: { hideElements: '.info, .frames, .button', targetType: 'class' }
};
var langMap = { UK: 'LUK', ES: 'LES', FR: 'LFR' };

$('.UK, .ES, .FR').on('click', function() {
  var $btn = $(this);
  var lang = $btn.attr('class').match(/(UK|ES|FR)/)[0];
  var scenario = $btn.data('scenario');
  var config = langConfigs[scenario];
  
  $(config.hideElements).hide();
  var targetSelector = config.targetType === 'id' ? '#' + langMap[lang] : '.' + langMap[lang];
  $(targetSelector).show();
});

这样你的代码会更整洁，后续维护也更方便！

内容的提问来源于stack exchange，提问作者Aspid