关闭翻译栏后，将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对我先前问题的回答，Modifying output of google.translate.TranslateElement.InlineLayout.VERTICAL和他在下面链接的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;
}

编辑8/5/21

-- :(当我使用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) => {

把这个问题解决了。

但这似乎是生成的类名，因此它容易更改。document.querySelector('select').addEventListener('change', (event) => {

如果您不在其他任何地方使用select，则工作正常。

​