更改活動語言圖標+名由下面的HTML郎

在線 - http://uposonghar.com/lang.html 更改活動語言圖標+名由下面的HTML郎

我的代碼 -

<nav role="custom-dropdown" id="nav_language" dir="ltr"> 
<input type="checkbox" id="button"> 
<label for="button" id="labelLang" onclick><img alt="English" title="English" src="http://chitrchatr.com/wp-content/plugins/polylang/flags/en_US.png"> English</label> 
<ul> 
    <li><a hreflang="en" href="http://chitrchatr.com/en/"><img src="http://chitrchatr.com/wp-content/plugins/polylang/flags/en_US.png" title="English" alt="English" />&nbsp;English</a></li> 
    <li><a hreflang="de" href="http://chitrchatr.com/de/"><img src="http://chitrchatr.com/wp-content/plugins/polylang/flags/de_DE.png" title="Deutsch" alt="Deutsch" />&nbsp;Deutsch</a></li> 
    <li><a hreflang="ru" href="http://chitrchatr.com/ru/"><img src="http://chitrchatr.com/wp-content/plugins/polylang/flags/ru_RU.png" title="Русский" alt="Русский" />&nbsp;Русский</a></li> 
    <li><a hreflang="es" href="http://chitrchatr.com/es/"><img src="http://chitrchatr.com/wp-content/plugins/polylang/flags/es_ES.png" title="Español" alt="Español" />&nbsp;Español</a></li> 
    <li><a hreflang="zh" href="http://chitrchatr.com/zh/"><img src="http://chitrchatr.com/wp-content/plugins/polylang/flags/zh_CN.png" title="中文 (中國)" alt="中文 (中國)" />&nbsp;中文 (中國)</a></li> 
    <li><a hreflang="ar" href="http://chitrchatr.com/ar/"><img src="http://chitrchatr.com/wp-content/plugins/polylang/flags/ar.png" title="العربية" alt="العربية" />&nbsp;العربية</a></li> 
    <li><a hreflang="fr" href="http://chitrchatr.com/fr/"><img src="http://chitrchatr.com/wp-content/plugins/polylang/flags/fr_FR.png" title="Français" alt="Français" />&nbsp;Français</a></li> 
    <li><a hreflang="it" href="http://chitrchatr.com/it/"><img src="http://chitrchatr.com/wp-content/plugins/polylang/flags/it_IT.png" title="Italiano" alt="Italiano" />&nbsp;Italiano</a></li> 
    <li><a hreflang="in" href="http://chitrchatr.com/in/"><img src="http://chitrchatr.com/wp-content/plugins/polylang/flags/id_ID.png" title="Bahasa Indonesia" alt="Bahasa Indonesia" />&nbsp;Bahasa Indonesia</a></li> 
    <li><a hreflang="ko" href="http://chitrchatr.com/ko/"><img src="http://chitrchatr.com/wp-content/plugins/polylang/flags/ko_KR.png" title="한국어" alt="한국어" />&nbsp;한국어</a></li> 
    <li><a hreflang="th" href="http://chitrchatr.com/th/"><img src="http://chitrchatr.com/wp-content/plugins/polylang/flags/th.png" title="ไทย" alt="ไทย" />&nbsp;ไทย</a></li> 
    <li><a hreflang="tl" href="http://chitrchatr.com/tl/"><img src="http://chitrchatr.com/wp-content/plugins/polylang/flags/tl.png" title="Tagalog" alt="Tagalog" />&nbsp;Tagalog</a></li> 
    <li><a hreflang="hi" href="http://chitrchatr.com/hi/"><img src="http://chitrchatr.com/wp-content/plugins/polylang/flags/hi_IN.png" title="हिन्दी" alt="हिन्दी" />&nbsp;हिन्दी</a></li> 
    <li><a hreflang="ja" href="http://chitrchatr.com/ja/"><img src="http://chitrchatr.com/wp-content/plugins/polylang/flags/ja.png" title="日本語" alt="日本語" />&nbsp;日本語</a></li> 
    <li><a hreflang="sv" href="http://chitrchatr.com/sv/"><img src="http://chitrchatr.com/wp-content/plugins/polylang/flags/sv_SE.png" title="Svenska" alt="Svenska" />&nbsp;Svenska</a></li> 
</ul>

我想它的代碼時喜歡<html lang="de-DE">然後但─

<label for="button" id="labelLang" onclick><img alt="English" title="English" src="http://chitrchatr.com/wp-content/plugins/polylang/flags/en_US.png"> English</label>

將-

<label for="button" id="labelLang" onclick><img alt="German" title="German" src="http://chitrchatr.com/wp-content/plugins/polylang/flags/de-DE.png"> German</label>

時再<html lang="it-IT">然後但─

<label for="button" id="labelLang" onclick><img alt="English" title="English" src="http://chitrchatr.com/wp-content/plugins/polylang/flags/en_US.png"> English</label>

將是─

<label for="button" id="labelLang" onclick><img alt="Italian" title="Italian" src="http://chitrchatr.com/wp-content/plugins/polylang/flags/it-IT.png"> Italian</label>

我知道這是可能由JavaScript，我知道如何通過JavaScript，但不要讓HTML語言值不知道如何通過lang值更改語言名稱+圖標。

來源

2014-02-18 arifix

你有什麼已經嘗試過呢？ – Pavlo

我做了一個原型，這是你想要的嗎？ http://jsfiddle.net/e755M/22/ – dreamweiver

var langarr = ['en_US.png','de-DE.png','it-IT.png']; 
var lansrc = "http://chitrchatr.com/wp-content/plugins/polylang/flags/"; 
var labelLang = $('#labelLang');

然後，您可以再補充它動態：像

labelLang.attr('src',lansrc+langarr[0]) //for en-US 
    labelLang.attr('src',lansrc+langarr[1]) //for de-DE 
    labelLang.attr('src',lansrc+langarr[2]) //for it-IT

來源

2014-02-18 10:54:22

然後用js！：D 給標籤一個唯一的ID。加載頁面後運行訪問使用

lbl = document.getElementById("idvalue") 
lbl.setAttribute("alt","xxx")

我沒有嘗試過的代碼，可能會有一些錯誤的元素的JavaScript函數。但它有一個提示:)

來源

2014-02-18 10:46:04 hexec

下面將動態地設置標籤的IMG值。

var lang = document.documentElement.lang 

    var sub; 

    if (lang.length == 5 && (lang.indexOf("-") != -1)) { 
     sub = lang.replace('-','_') + ".png"; 
    } 
    else if (lang.length == 2) { 
     sub = lang + ".png"; 
    } 
    else { 
     return false; 
    } 

    $("img[src]").each(function(){ 

     if ($(this).parent("a") && $(this).attr('src').indexOf(sub) > 0) { 

      var labels_img = $("label > img"); 

      $("label").html(""); 

      labels_img.attr('src', $(this).attr('src')); 

      labels_img.attr('title', $(this).attr('title')); 

      labels_img.attr('alt', $(this).attr('alt')); 

      $("label").html(labels_img); 

      $("label").append($(this).attr('title')); 

<!-- uncomment below to see html --> 
<!--  alert($("label").parent().html()); --> 

      return false; 
     } 

    });

但是就像之前說過的，我認爲如果你在你的標籤中使用id，它會更實用和更少的工作。

來源

2014-02-24 10:28:03 jyrkim

更改活動語言圖標+名由下面的HTML郎

回答

相關問題