javascript - 如何用我当前的代码切换标志？

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

好的，我的第一个答案还差得远，但我看到你已经更新了你的 fiddle ，所以我有更多的背景信息

我已将 div 添加到您的 HTML 中，每当切换语言时，语言值也会作为类添加到 div。然后使用 CSS 添加一个背景图片，上面有所有标志，并且根据当前添加到元素的类(基于 current_lang)定位不同(显示不同的标志)

不用担心 fiddle 中的巨大数据 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");

请看这里的 fiddle : https://jsfiddle.net/ppppz1gL/

您还可以添加实际图像并更新脚本中的 src 属性，但单个背景图像(一个 http 请求)，尤其是数据 URI(无 http 请求)效率更高(尽管有大量文本事情的计划非常简单(图像可能是大多数人可以减少其网站大小的方式 - 虽然很容易不打扰 - 我很内疚!))

希望对你有帮助