Question

我目前正在使用以下代码作为我的语言标志

<a href="#" onclick="change_lang()"><i class="flag-icon flag-icon-gb></i></a>

我的Javascript是

var dictionary = {
    'greet': {
        'it': 'Ciao',
        'en': 'Hello',
        'fr': 'Salut',
    }
};
var langs = ['it', 'en', 'fr'];
var current_lang_index = 0;
var current_lang = langs[current_lang_index];

window.change_lang = function() {
current_lang_index = ++current_lang_index % 3;
current_lang = langs[current_lang_index];
translate();
}

function translate() {
$("[data-translate]").each(function(){
    var key = $(this).data('translate');
    $(this).html(dictionary[key][current_lang] || "N/A");
});
}

translate();

可以在https://jsfiddle.net/x93oLad8/4/

找到

如何使用相同的javascript将flag-icon-gb更改为flag-icon-cn？

Answer 1

好的，我的第一个答案还没有结束，但我看到你已经更新了你的小提琴，所以我有更多的背景

我已将HTML添加到您的HTML中，每当语言切换时，语言值也会作为类添加到div中。然后使用CSS添加背景图像，其中包含所有标记，并且它的位置不同（显示不同的标记），具体取决于当前添加到元素的类（基于current_lang）

不要担心小提琴中的巨大数据URI，我没有使用背景图像来制作一个并将其转换为数据URI - 您可以使用实际图片（如果你愿意）或坚持使用数据URI

所以我添加到HTML：

<div id="langflag"></div>

您可以将id（或将其更改为类）添加到任何内容并在其上放置背景图像 - 只需确保添加一些填充，以便有一些背景空间无法获得覆盖。

然后我在你的js上添加一行来改变div上的类：

function translate() {
    $("[data-translate]").each(function(){
        var key = $(this).data('translate');
        $(this).html(dictionary[key][current_lang] || "N/A");
        $("#langflag").attr('class', current_lang); // this is new
    });
}

然后添加添加背景图像的样式并根据类更改位置：

#langflag {
  height: 20px;
  width: 32px;
  border: 1px solid #cccccc;
  background-color: white;
  background-repeat: no-repeat;
  background-image: url("yourpic.png");
}
#langflag.it { background-position: 0 0; }
#langflag.en { background-position: -32px 0; }
#langflag.fr { background-position: -64px 0; }

你可以使用数据uri作为图片 - 丑陋但有效率！：

background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAAAUCAIAAAD9Sa+4AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QjI4Mjc1QkFBMzI0MTFFNzhFODQ4NUNFMUQ2N0M5NDEiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QjI4Mjc1QkJBMzI0MTFFNzhFODQ4NUNFMUQ2N0M5NDEiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpCMjgyNzVCOEEzMjQxMUU3OEU4NDg1Q0UxRDY3Qzk0MSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpCMjgyNzVCOUEzMjQxMUU3OEU4NDg1Q0UxRDY3Qzk0MSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PqWMs18AAAM6SURBVHja7JhNaBNBFIDf7Ew2zWa32yS1rW1R+wMi9OjfSSgiXnrqpRcLWvEgYqEHEezVgwcRPHjyUBSqUISqB1G0iIhY/DtUPRQt2mrtb352m2SzfzNu/5RuNklzKW3IY1kW5r2Z976ZN/tmEGMMAFKmZlGbQxxsFJvRAPH7sQ+8hFkW1TSUZQVOpwhhMQhbIvFEJpU0MXG7QSnDGNXWCAghb/81jcUSQIhHm22j6jDiebQK6NSza4Njj3dVNbjUFqKTV9sv9h/p9hxAGXn1reeCv7EeNnpgxRMVrc0HHt3ffJD62Mf4zVskErAWNamrM3iyY/O2py+N3Lk+iltD7hiThhQRZkbPBEXvCdYHH6hne3FLE2ShpTNz8tMh39GDa/DiyQWI/lhg1K26OKGkE7k8s1Npbeo7M00XIHMx6rAvahVYvybVgQHfXtn4qfjbWooCZGuWE6ytGu6GJd30EcpyGjLDZLrC1KVsQExRnUXkfK4B4vggCCEIyG7VYJj4KnINgHifz1EIVbkAOSlGqmTYKkEVThR+kDymhJN4DkEe/xFfiSQxGxCqlADj5R6gLHmlDGinAOI47+8yoPXNQoaV3dR5cYHg9gFEtmCMuZ4umlzKiwfb0XlSLzqbPb9bVO/eTr98DtTO363QfkI+31cKgFJPXtixWD4NBkgAUhtmFuVE3hj/mnn3BVChRSfXyaWxgpzgkV5IhydspWJZLsKd+lXUC3frL5UU8zU140gkb6wc0zWaSADmmGFz4QgRJMiuWjcKrqktEUCNI+83kYbD0x2dTiVtTqk1Ny6H+q6U/2KuFONh/UyACIFtI9sFENP1f7vy8uGuDKhcSZeIkP+lCFt53EufFcqNHFYFDXcWIJqKQXzKqWjd7bFJM6PmMqbpdCY9C1Pgvg9KLnKiUOSVRYA0NOA6iZgiJ0rF7V9zSYB5mMguC3RDEQ3Kcp1caFyxjVkYt7OvO2yIsrS27NjqjeLr6c8Tyh+Jd0el6KnDtfvbqps8BzBm55befsBCwO2xaXKBgHz82NZM8r3h8ZE3v2sibjcyhlUp8P29h3g/9jS0Po3pQw+5SDg7A6iiVpzrxvv2/BVgAO56Rnr2F717AAAAAElFTkSuQmCC");

请看这里的小提琴： https://jsfiddle.net/ppppz1gL/

您还可以添加实际图像并更新脚本中的src属性，但单个背景图像（一个http请求），尤其是数据URI（无http请求）更有效（尽管有大量文本，在事物计划中相当轻松（图像可能是大多数人可以减少他们网站的大小 - 它很容易不打扰 - 我很有罪！）

我希望有帮助

如何使用当前代码切换标志？

1 个答案: