这个问题与我上一篇关于在点击某个开关时更改href-tag的URL的帖子有关。 Link
我现在已经设置了不同的东西,因为我无法到达任何地方。 href更改现在有效,但我无法在下拉框中显示所选图标和名称。
因此,例如,如果选择“德语”,那么它应该与相应的标志图标一起显示为下拉框中的当前选择。
我的设置是错误的还是需要解决这个问题?
<div id="language-selection"><div id="current-language"><span class="element-invisible">Current language:</span>
<img class="language-icon" src="http://www.euromonitor.com/medialibrary/Image/Flag_20x20_United_Kingdom.png" alt="English" title="English" /> English
</div>
<div class="element-invisible">Switch to:</div>
<ul id="other-languages">
<li class="zh-hans first"><a href="javascript:;" data-lang="Chinese" class="clickButton"><img class="language-icon" src="http://www.euromonitor.com/medialibrary/Image/Flag_20x20_China.png" alt="简体中文" title="简体中文" /> 简体中文</a></li>
<li class="en"><a href="javascript:;" data-lang="English" class="clickButton" </a> <span class="language-link"><img class="language-icon" src="http://www.euromonitor.com/medialibrary/Image/Flag_20x20_United_Kingdom.png" alt="English" title="English" />English</span></li>
<li class="de last"><a href="javascript:;" data-lang="German" class="clickButton"><img class="language-icon" src="http://www.euromonitor.com/medialibrary/Image/Flag_20x20_Germany.png" alt="German" title="German" /> German</a></li>
</ul>
</div>
<ul>
<li><a class="clickButton" href="folder1/firstLink/Languages/English/folder/index.html">Index Link</a></li>
<li><a class="clickButton" href="../folder2/secondLink/Languages/English/folder/index.html">A different Link </a></li>
<li><a class="clickButton" href="../../folder3/Languages/English/folder/index.html">Another different link</a></li>
<ul>
答案 0 :(得分:1)
嗨我为了工作而改变了你的代码。您需要在选择单击时更改语言文本和语言图像。
HTML部分:
<div id="language-selection"><div id="current-language"><span class="element-invisible">Current language:</span>
<img class="language-icon" src="http://www.euromonitor.com/medialibrary/Image/Flag_20x20_United_Kingdom.png" alt="English" title="English" /><span class="text">English</span>
</div>
<div class="element-invisible">Switch to:</div>
<ul id="other-languages">
<li class="zh-hans first"><a href="javascript:;" data-lang="Chinese" class="clickButton"><img class="language-icon" src="http://www.euromonitor.com/medialibrary/Image/Flag_20x20_China.png" alt="简体中文" title="简体中文" /> 简体中文</a></li>
<li class="en"><a href="javascript:;" data-lang="English" class="clickButton"><img class="language-icon" src="http://www.euromonitor.com/medialibrary/Image/Flag_20x20_United_Kingdom.png" alt="English" title="English" />English</a></li>
<li class="de last"><a href="javascript:;" data-lang="German" class="clickButton"><img class="language-icon" src="http://www.euromonitor.com/medialibrary/Image/Flag_20x20_Germany.png" alt="German" title="German" /> German</a></li>
</ul>
</div>
...
这部分的JS:
...
var current = "English"
$("[data-lang]").on("click", function() {
var lang = $(this).data("lang");
$(".clickButton").prop("href", function(i, href) {
return href.replace(current, lang);
});
$("#current-language img").attr("src", $(this).children("img").attr("src")); // NEW
$("#current-language .text").text(lang); // NEW
current = lang;
});
答案 1 :(得分:1)
请在current = lang;
/*Replace language flag src , alt and title*/
$('#language-selection > #current-language > img').attr('src' , $(this).find('img').attr("src"));
$('#language-selection > #current-language > img').attr('alt' , lang);
$('#language-selection > #current-language > img').attr('title' , lang);
/*check for all content in div having id current-language and check if nodeType == 3 mean string text then replace old text with new one */
$("#language-selection > #current-language").contents().each(function() {
if(this.nodeType == 3)
this.nodeValue = this.nodeValue.replace(current, lang);
});
请检查链接Jsfiddle Link。
感谢