用jQuery替换链接文本不起作用,控制台

时间:2017-03-30 10:22:26

标签: javascript jquery

即使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>
&#13;
&#13;
&#13;

3 个答案:

答案 0 :(得分:2)

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

进行比较

&#13;
&#13;
// 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");
	});
}
})
&#13;
/* 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;
}
&#13;
<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>
&#13;
&#13;
&#13;

答案 1 :(得分:1)

符号和名称之间实际上有两个空格,所以我猜if语句根本不是真的

答案 2 :(得分:1)

使用他的。此代码段正在运行

&#13;
&#13;
$(".btn").on("click", function() {
	$("a").filter(function(index) {
  	  if($(this).text().includes("Nieuws")) {
    	     var text = $(this).text()
    	     $(this).text(text.replace("Nieuws", "News"))
          }
  	 
   });
})
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>
  
  
<button class="btn">Change</button>
&#13;
&#13;
&#13;