下拉框设置

Question

这个问题与我之前发表的关于在点击某个开关时更改href-tag的URL有关。 Link

我现在已经设置了一些不同的东西，因为我什么地方都找不到。 href改变现在工作，但我不能得到选定的图标加上名称显示在下拉框中。

JSFiddle

因此，例如，如果“德语”被选择，那么它应该与根据旗帜图标如在下拉框当前选择出现。

我的设置错了，或者需要什么来解决这个问题？

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

Answer 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前添加在您的jQuery脚本代码如下代码。

谢谢

Answer 2

嗨我改变你的代码有点为了工作。您需要在选择点击时更改语言文字和语言图像。

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