javascript - 用 jQuery 替换链接文本不起作用，控制台中没有错误

Question

有一个网站确实想要双语，尽管 CMS 不支持它。系统按钮都可以是英语或荷兰语，但内容本身不是。所以他们只写有英语和荷兰语文本的文章。

现在我知道，这是一场火车残骸。但这就是客户想要的，所以这就是他得到的。我只是无权访问 CMS，因此无法正确执行此操作。

现在，为了翻译菜单按钮，我会检查某个元素的标题是否是“服务条款”或“Regelement”，这会告诉我该网站是荷兰语还是英语。然后，我有一个 each 函数，它运行菜单中的所有 li 元素，检查文本是否与我需要翻译的文本之一匹配，所以基本上:

if ($(this).text() == 'Nieuws') { 
    $(this).text('News'); 
}

这曾经有效，但最近在网站顶部添加了语言切换按钮后，菜单不再翻译，仅翻译子菜单。代码运行良好，没有错误，我什至添加了一些警报来检查它是否正确检测到语言等。一切正常。

由于某种原因，现在只有子菜单被翻译。 jQuery 当然是在页面末尾、内容加载之后执行的。该网站是https://www.onsplatform.tv/genderhof/但你只能看到“Vraag & aanbod”按钮。

// for snippet purposes
var setlanguage = 'en';

// If language of user is English
if (setlanguage == 'en') {

	// Loop through each main level menu
	$("#menu li a").each(function(){
		// Set text of menu item to variable
		var tempmenutxt = $(this).text();

		// Translate text of menu item if match is found
		if (tempmenutxt == 'Nieuws ▼') { $(this).text('News ▼'); }
		 else if (tempmenutxt == 'SamenVeilig') { $(this).text("Camera's"); }
		 else if (tempmenutxt == 'Vraag & aanbod ▼') { $(this).text('Marketplace ▼'); }
		 else if (tempmenutxt == 'Informatie ▼') { $(this).text('Information ▼'); }
		 else if (tempmenutxt == 'Fotoalbum') { $(this).text("Photo's"); }
		 else if (tempmenutxt == 'Spelletjes') { $(this).text("Games"); }
		 else if (tempmenutxt == 'Enquêtes') { $(this).text("Polls"); }
		 else if (tempmenutxt == 'Koffiehuukske') { $(this).text("Coffeecorner"); }
		 else if (tempmenutxt == 'Activiteiten') { $(this).text("Activities"); }
		 else if (tempmenutxt == 'Klachtenhoek') { $(this).text("Complaints"); }
	});
	// Because "display: none;" items can't be read, make all submenu's visible
	$("#menu li ul").each(function(){
		$(this).css("display","block");
	});
	// Translate text of menu item if match is found
	$("#menu li ul li a").each(function(){
		var tempmenutxt = $(this).text();
		if (tempmenutxt == '- Onderhoud aanvragen') { $(this).text('- Request maintenance'); }
		 else if (tempmenutxt == '- Goederen/diensten') { $(this).text("- Goods/services"); }
		 else if (tempmenutxt == '- Mantelzorg / I.B.') { $(this).text("- Caregiving/intensive support"); }
		 else if (tempmenutxt == '- Belangrijke telefoonnummers') { $(this).text("- Important phone numbers"); }
	});
	// Make all submenu invisible again
	$("#menu li ul").each(function(){
		$(this).css("display","none");
	});
}

/* This CSS is just to illustrate, don't mind it, quick and dirty */

#menu {
  width: 100%;
  list-style: none;
  margin: 0;
  padding: 0;
  background: #FF0000;
}

#menu li {
  display: inline-block;
  position: relative;
  padding: 0;
}

#menu li a {
  display: inline-block;
  height: 30px;
  line-height: 30px;
  padding: 0 10px;
  color: #FFF;
}

#menu li ul {
  display: none;
  width: auto;
  position: absolute;
  top: 30px;
  background: #000;
  z-index: 1000;
  list-style: none;
  margin: 0;
  padding: 0;
}

#menu li:hover ul {
  display: block !important;
}

#menu li ul li {
  display: block;
}
  

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="menu">
        <li class="selected">
            <a href="/genderhof/">Home</a> 
        </li>
        <li>
            <a href="https://www.onsplatform.tv/genderhof/nieuws" title="Nieuws">Nieuws  ▼</a>       
        
            <ul style="display: none;" id="subMenu3393">
                <li>
                    <a href="https://www.onsplatform.tv/genderhof/wooninc" title="- Wooninc.">- Wooninc.</a>
                </li>       
                <li>
                    <a href="https://www.onsplatform.tv/genderhof/CommunityUser/SendGroupMail/740" title="- Onderhoud aanvragen">- Request maintenance</a>
                </li>       
            </ul>
         </li>
        <li>
            <a href="https://www.onsplatform.tv/genderhof/samenveilig" title="SamenVeilig">SamenVeilig </a>       
        
         </li>
        <li>
            <a href="https://www.onsplatform.tv/genderhof/agenda" title="Agenda">Agenda </a>       
        
         </li>
        <li>
            <a href="https://www.onsplatform.tv/genderhof/marktplaats" title="Vraag &amp; aanbod">Vraag &amp; aanbod  ▼</a>       
        
            <ul style="display: none;" id="subMenu3396">
                <li>
                    <a href="https://www.onsplatform.tv/genderhof/goederen-diensten" title="- Goederen/diensten">- Goods/services</a>
                </li>       
                <li>
                    <a href="https://www.onsplatform.tv/genderhof/mantelzorg---i-b" title="- Mantelzorg / I.B.">- Caregiving/intensive support</a>
                </li>       
            </ul>
         </li>
        <li>
            <a href="#" title="Informatie">Informatie  ▼</a>       
        
             <ul style="display: none;" id="subMenu3397">
                <li>
                    <a href="https://www.onsplatform.tv/genderhof/belangrijke-telefoonnummers_1" title="- Belangrijke telefoonnummers">- Important phone numbers</a>
                </li>       
            </ul>
         </li>
        <li>
            <a href="https://www.onsplatform.tv/genderhof/fotoalbum" title="Fotoalbum" tmp_title="Fotoalbum">Fotoalbum </a>       
        
         </li>
        <li>
            <a href="https://www.onsplatform.tv/genderhof/chat" title="Chat" tmp_title="Chat">Chat </a>       
        
         </li>
        <li>
            <a href="https://www.onsplatform.tv/genderhof/spelletjes" title="Spelletjes">Spelletjes </a>       
        
         </li>
        <li>
            <a href="https://www.onsplatform.tv/genderhof/enqu-tes" title="Enquêtes">Enquêtes </a>       
        
         </li>
        <li>
            <a href="https://www.onsplatform.tv/genderhof/koffiehuukske" title="Koffiehuukske">Koffiehuukske </a>       
        
         </li>
        <li>
            <a href="https://www.onsplatform.tv/genderhof/digisoos" title="Activiteiten">Activiteiten </a>       
        
         </li>
        <li>
            <a href="https://www.onsplatform.tv/genderhof/klachtenhoek_1" title="Klachtenhoek">Klachtenhoek </a>       
        
         </li>
        <li>
            <a href="https://www.onsplatform.tv/genderhof/digisoos_1" title="Digisoos">Digisoos </a>       
        
        </li>
    </ul>

Answer 1

这是一个空间问题。在你的 html 中，它们有两个空格 'Nieuws ▼'。但是与 javascript 的单个空格相比

// for snippet purposes
var setlanguage = 'en';
$(document).ready(function(){
// If language of user is English
if (setlanguage == 'en') {

	// Loop through each main level menu
	$("#menu li a").each(function(){
		// Set text of menu item to variable
		var tempmenutxt = $(this).text().trim()
		// Translate text of menu item if match is found
		if (tempmenutxt == 'Nieuws  ▼') { $(this).text('News  ▼'); }
		 else if (tempmenutxt == 'SamenVeilig') { $(this).text("Camera's"); }
		 else if (tempmenutxt == 'Vraag & aanbod  ▼') { $(this).text('Marketplace  ▼'); }
		 else if (tempmenutxt == 'Informatie  ▼') { $(this).text('Information  ▼'); }
		 else if (tempmenutxt == 'Fotoalbum') { $(this).text("Photo's"); }
		 else if (tempmenutxt == 'Spelletjes') { $(this).text("Games"); }
		 else if (tempmenutxt == 'Enquêtes') { $(this).text("Polls"); }
		 else if (tempmenutxt == 'Koffiehuukske') { $(this).text("Coffeecorner"); }
		 else if (tempmenutxt == 'Activiteiten') { $(this).text("Activities"); }
		 else if (tempmenutxt == 'Klachtenhoek') { $(this).text("Complaints"); }
	});
	// Because "display: none;" items can't be read, make all submenu's visible
	$("#menu li ul").each(function(){
		$(this).css("display","block");
	});
	// Translate text of menu item if match is found
	$("#menu li ul li a").each(function(){
		var tempmenutxt = $(this).text().trim();
		if (tempmenutxt == '- Onderhoud aanvragen') { $(this).text('- Request maintenance'); }
		 else if (tempmenutxt == '- Goederen/diensten') { $(this).text("- Goods/services"); }
		 else if (tempmenutxt == '- Mantelzorg / I.B.') { $(this).text("- Caregiving/intensive support"); }
		 else if (tempmenutxt == '- Belangrijke telefoonnummers') { $(this).text("- Important phone numbers"); }
	});
	// Make all submenu invisible again
	$("#menu li ul").each(function(){
		$(this).css("display","none");
	});
}
})

/* This CSS is just to illustrate, don't mind it, quick and dirty */

#menu {
  width: 100%;
  list-style: none;
  margin: 0;
  padding: 0;
  background: #FF0000;
}

#menu li {
  display: inline-block;
  position: relative;
  padding: 0;
}

#menu li a {
  display: inline-block;
  height: 30px;
  line-height: 30px;
  padding: 0 10px;
  color: #FFF;
}

#menu li ul {
  display: none;
  width: auto;
  position: absolute;
  top: 30px;
  background: #000;
  z-index: 1000;
  list-style: none;
  margin: 0;
  padding: 0;
}

#menu li:hover ul {
  display: block !important;
}

#menu li ul li {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="menu">
        <li class="selected">
            <a href="/genderhof/">Home</a> 
        </li>
        <li>
            <a href="https://www.onsplatform.tv/genderhof/nieuws" title="Nieuws">Nieuws  ▼</a>       
        
            <ul style="display: none;" id="subMenu3393">
                <li>
                    <a href="https://www.onsplatform.tv/genderhof/wooninc" title="- Wooninc.">- Wooninc.</a>
                </li>       
                <li>
                    <a href="https://www.onsplatform.tv/genderhof/CommunityUser/SendGroupMail/740" title="- Onderhoud aanvragen">- Request maintenance</a>
                </li>       
            </ul>
         </li>
        <li>
            <a href="https://www.onsplatform.tv/genderhof/samenveilig" title="SamenVeilig">SamenVeilig </a>       
        
         </li>
        <li>
            <a href="https://www.onsplatform.tv/genderhof/agenda" title="Agenda">Agenda </a>       
        
         </li>
        <li>
            <a href="https://www.onsplatform.tv/genderhof/marktplaats" title="Vraag &amp; aanbod">Vraag &amp; aanbod  ▼</a>       
        
            <ul style="display: none;" id="subMenu3396">
                <li>
                    <a href="https://www.onsplatform.tv/genderhof/goederen-diensten" title="- Goederen/diensten">- Goods/services</a>
                </li>       
                <li>
                    <a href="https://www.onsplatform.tv/genderhof/mantelzorg---i-b" title="- Mantelzorg / I.B.">- Caregiving/intensive support</a>
                </li>       
            </ul>
         </li>
        <li>
            <a href="#" title="Informatie">Informatie  ▼</a>       
        
             <ul style="display: none;" id="subMenu3397">
                <li>
                    <a href="https://www.onsplatform.tv/genderhof/belangrijke-telefoonnummers_1" title="- Belangrijke telefoonnummers">- Important phone numbers</a>
                </li>       
            </ul>
         </li>
        <li>
            <a href="https://www.onsplatform.tv/genderhof/fotoalbum" title="Fotoalbum" tmp_title="Fotoalbum">Fotoalbum </a>       
        
         </li>
        <li>
            <a href="https://www.onsplatform.tv/genderhof/chat" title="Chat" tmp_title="Chat">Chat </a>       
        
         </li>
        <li>
            <a href="https://www.onsplatform.tv/genderhof/spelletjes" title="Spelletjes">Spelletjes </a>       
        
         </li>
        <li>
            <a href="https://www.onsplatform.tv/genderhof/enqu-tes" title="Enquêtes">Enquêtes </a>       
        
         </li>
        <li>
            <a href="https://www.onsplatform.tv/genderhof/koffiehuukske" title="Koffiehuukske">Koffiehuukske </a>       
        
         </li>
        <li>
            <a href="https://www.onsplatform.tv/genderhof/digisoos" title="Activiteiten">Activiteiten </a>       
        
         </li>
        <li>
            <a href="https://www.onsplatform.tv/genderhof/klachtenhoek_1" title="Klachtenhoek">Klachtenhoek </a>       
        
         </li>
        <li>
            <a href="https://www.onsplatform.tv/genderhof/digisoos_1" title="Digisoos">Digisoos </a>       
        
        </li>
    </ul>