1

この質問は、スイッチをクリックしたときに href タグの URL を変更するという私の以前の投稿に関連しています。 リンク

どこにも行けなかったので、今は別のものをセットアップしました。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="简体中文" /> 简体中文&lt;/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>
4

2 に答える 2

1

前に、jquery スクリプト コードに以下のコードを追加してください。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を確認してください。

ありがとう

于 2012-10-22T09:58:48.827 に答える
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="简体中文" /> 简体中文&lt;/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;
});
于 2012-10-22T08:59:35.733 に答える