关闭翻译栏后，将CSS更改重新应用到Google翻译小部件 [英] Reapplying CSS changes to the Google Translate widget after closing the translate bar

问题描述

我正在修改Google Translate小部件的文本和CSS，并在使用 addEventListener 和 querySelector 在Google Translate栏后重新应用CSS和文本更改时出现错误关闭，并且页面恢复为原始语言.

我突然收到错误未捕获的TypeError:x.X未定义指向该行

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

此新错误可能是由于jQuery主库更新所致.

如何定义 x.X ?

感谢caramba为我先前的问题

I'm modifying the text and CSS of the Google Translate widget and have an error when using addEventListener and querySelector to reapply CSS and text changes after the Google Translate bar is closed and when the page is returned to the original language.

I'm suddenly getting an error Uncaught TypeError: x.X is undefined pointing to the line

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

This new error is probably due to a jQuery main library update.

How do I define x.X?

Thanks to caramba for the answer to my earlier question Modifying output of google.translate.TranslateElement.InlineLayout.VERTICAL and for his followup in the Fiddle linked below.

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;
}

解决方案

Here logging x you will find querySelector under an object V. x.V.querySelector('select').addEventListener('change', (event) => {

Fixed this issue on jsfiddle.
But this seems as generated classname so its susceptible to changes. document.querySelector('select').addEventListener('change', (event) => {

works fine incase you are not using select anywhere else.

这篇关于关闭翻译栏后，将CSS更改重新应用到Google翻译小部件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！