如何通过自定义按钮触发谷歌翻译下拉菜单实现网页翻译

问题核心 #

谷歌翻译组件的下拉选择器的change事件是原生JS绑定的，jQuery自带的trigger('change')只能触发通过jQuery绑定的同类型事件，无法触发原生事件监听器，因此仅修改了下拉框取值，没有触发翻译流程。

替换代码 #

将你原有按钮点击事件的代码替换为以下内容即可：

$('#hindi').on('click', function(){
  // 获取谷歌翻译原生下拉元素
  const selectEl = document.querySelector('select.goog-te-combo');
  if (!selectEl) return;
  // 赋值印地语编码
  selectEl.value = 'hi';
  // 手动创建并触发原生change事件
  const changeEvent = new Event('change');
  selectEl.dispatchEvent(changeEvent);
});

优化建议（可选） #

如果存在点击按钮无反应的情况，大概率是谷歌翻译组件还没加载完成、下拉元素还没渲染导致的，可以把按钮点击事件的绑定逻辑放到googleTranslateElementInit函数末尾执行，确保组件加载完成后再绑定事件。

内容的提问来源于stack exchange，提问作者Marvel'sFan