关闭翻译栏后，将 CSS 更改重新应用到 Google 翻译小部件

Question

我正在修改 Google 翻译小部件的文本和 CSS，在使用 addEventListener 和 querySelector 重新应用 CSS 时出现错误Google 翻译栏关闭后以及页面返回原始语言时，文本会发生变化。

我突然得到一个错误Uncaught TypeError: x.X is undefined指向行

x.X.querySelector('select').addEventListener('change', (event) => {

这个新错误可能是由于 jQuery 主库更新造成的。

如何定义x.X？

感谢 caramba 回答我之前的问题以及他在下面链接的 Fiddle 中的跟进。

Fiddle: https://jsfiddle.net/8m2xkez4/

Javascript:

var observer = new MutationObserver(function (event) {
  if(false === document.documentElement.classList.contains('translated-ltr')) {
      renameGoogleSelectDropdown();
  }
});

var renameGoogleSelectDropdown = function(){
    function cleartimer() {     
      setTimeout(function(){ 
          window.clearInterval(myVar); 
      }, 500);             
  }
  function myTimer() {
      if ($('.goog-te-combo option:first').length) {
          $('.goog-te-combo option:first').html('Translate');
          cleartimer();
      }
  }
  var myVar = setInterval(function(){ myTimer() }, 0); 
};


function googleTranslateElementInit() {
  var x = new google.translate.TranslateElement({
  pageLanguage: 'en', includedLanguages: 'af,ach,ak,am,ar,az,be,bem,bg,bh,bn,br,bs,ca,chr,ckb,co,crs,cs,cy,da,de,ee,el,en,eo,es,es-419,et,eu,fa,fi, fo,fr,fy,ga,gaa,gd,gl,gn,gu,ha,haw,hi,hr,ht,hu,hy,ia, id,ig,is,it,iw,ja,jw,ka,kg,kk,km,kn,ko,kri,ku,ky,la, lg,ln,lo,loz,lt,lua,lv,mfe,mg,mi,mk,ml,mn,mo,mr,ms,mt, ne,nl,nn,no,nso,ny,nyn,oc,om,or,pa,pcm,pl,ps,pt-BR, pt-PT,qu,rm,rn,ro,ru,rw,sd,sh,si,sk,sl,sn,so,sq,sr, sr-ME,st,su,sv,sw,ta,te,tg,th,ti,tk,tl,tn,to,tr,tt, tum,tw,ug,uk,ur,uz,vi,wo,xh,yi,yo,zh-CN,zh-TW,zu',
  layout: google.translate.TranslateElement.InlineLayout.VERTICAL
  }, 'google_translate_element');
  

  x.X.querySelector('select').addEventListener('change', (event) => {
    observer.observe(event.target.closest('html'), {
      attributes: true, 
      attributeFilter: ['class'],
      childList: false, 
      characterData: false
    })
    });
}


$(window).on('load', function() {
  $('.goog-te-gadget').html($('.goog-te-gadget').children());
  $("#google-translate").fadeIn('1000');
    renameGoogleSelectDropdown();
});

HTML:

<div id="google-translate">
  <div id="google_translate_element"></div>
</div>

CSS:

#google-translate {
  display: none;
}

编辑 21 年 8 月 5 日

这又坏了 :( 当我使用 console.log(x) 时，我得到 ReferenceError: x is not defined。

如何在 Google 小部件 Javascript 中找到新的类名？它在这里：pastebin.com/xWVES3r1

Answer 1

在这里记录 x 你会发现 querySelector 在对象 V 下。 x.V.querySelector('select').addEventListener('change', (event) => {

修复了 jsfiddle 上的这个问题。
但这似乎是生成的类名，因此很容易发生变化。 document.querySelector('select').addEventListener('change', (event) => {

在您没有在其他任何地方使用 select 的情况下工作正常。

关闭翻译栏后，将 CSS 更改重新应用到 Google 翻译小部件

Reapplying CSS changes to the Google Translate widget after closing the translate bar

javascript

jquery

google-translate

console.log