jQuery 语言切换器文本和图像答案

【问题标题】：jQuery language switcher text and imagesjQuery 语言切换器文本和图像
【发布时间】：2017-03-15 04:00:39
【问题描述】：

我是 jQuery 的新手。这段代码对我有用，可以更改 html 中的文本：

// Some variables for later
var dictionary, set_lang;

// Object literal behaving as multi-dictionary
dictionary = {
    "english": {
        "_hello": "Hello",
        "_january": "January"
    },
    "portuguese": {
        "_hello": "Oie",
        "_january": "Janeiro"
    },
    "russian": {
        "_hello": "привет",
        "_january": "январь"
    }
};

$(function () {

    // Lets be professional, shall we?
    "use strict";

    // Function for swapping dictionaries
    set_lang = function (dictionary) {
        $("[data-translate]").text(function () {
            var key = $(this).data("translate");
            if (dictionary.hasOwnProperty(key)) {
                return dictionary[key];
            }
        });
    };

    // Swap languages when menu changes
    $("#lang").on("change", function () {
        var language = $(this).val().toLowerCase();
        if (dictionary.hasOwnProperty(language)) {
            set_lang(dictionary[language]);
        }
    });

    // Set initial language to English
    set_lang(dictionary.english);

});

1- 我也想改进这个相同的代码来更改一些图像（src），我该怎么做？

2- 是否可以简化此代码？新手很难理解这种代码：函数中的函数......呃！！！（有很多东西要学习）

提前致谢。

附：这是原始帖子的链接： jQuery language switcher

我相信这样的事情可以解决问题：

// Some variables for later
var dictionary, set_lang;

// Object literal behaving as multi-dictionary
dictionary = {
    "english": {
        "_hello": "Hello",
        "_january": "January"
        "_imgSrc": "myStuff/img/imageEn.png" //added as a example to image change
    },
    "portuguese": {
        "_hello": "Oie",
        "_january": "Janeiro"
        "_imgSrc": "myStuff/img/imagePt.png" //added as a example to image change
    },
    "russian": {
        "_hello": "привет",
        "_january": "январь"
        "_imgSrc": "myStuff/img/imageRu.png" //added as a example to image change
    }
};

$(function () {

    // Lets be professional, shall we?
    "use strict";

    // Function for swapping text
    set_lang = function (dictionary) {
        $("[data-translate]").text(function () {
            var key = $(this).data("translate");
            if (dictionary.hasOwnProperty(key)) {
                return dictionary[key];
            }
        });
    };

    // Function for swapping images
        set_lang = function (dictionary) {
            $("[src-translate]").attr("src") === function () {  //here is the problem, how to implement this?
                var key = $(this).data("translate");
                if (dictionary.hasOwnProperty(key)) {
                    return dictionary[key];
                }
            });
        };

    // Swap languages when menu changes
    $("#lang").on("change", function () {
        var language = $(this).val().toLowerCase();
        if (dictionary.hasOwnProperty(language)) {
            set_lang(dictionary[language]);
        }
    });

    // Set initial language to English
    set_lang(dictionary.english);

【问题讨论】：

JavaScript 和 Java 不一样！
1- 您必须考虑为翻译后的图像使用一致的文件命名系统，以便更改其中的一部分src。 是的，可能 2- 抱歉，函数内部的函数是 jQuery 和许多编程语言的强大方面。要求避免它就像要求一个无结的。 ;) 这就是说，显示要更改的图像的 HTML 示例...
- 感谢@TheValyreanGroup 的努力，但我不知道它对我有什么帮助...
- 谢谢，@Louys Patrice Bessette，我会努力改进问题，为您提供这些信息。
我虽然可以在其中实现这种代码的和平：stackoverflow.com/a/554289/5859611

标签： jquery internationalization translation

【解决方案1】：

我找到了一种让它按我想要的方式工作的方法：

$(function () {

    // Lets be professional, shall we?
    "use strict";

    // Some variables for later
    var dictionary, set_lang;

    // Object literal behaving as multi-dictionary
    dictionary = {
        "english": {
            "_hello": "Hello",
            "_january": "January"
        },
        "portuguese": {
            "_hello": "Oie",
            "_january": "Janeiro"
        },
        "spanish": {
            "_hello": "¡Hola",
            "_january": "Enero"
        }
    };

    // Function for swapping dictionaries
    set_lang = function (dictionary) {
        $("[data-translate]").text(function () {
            var key = $(this).data("translate");
            if (dictionary.hasOwnProperty(key)) {
                return dictionary[key];
            }
        });
    };

    // Swap languages when menu changes
    $("#lang").on("change", function () {
        var language = $(this).val().toLowerCase();
           if (language == "portuguese") {
        $("#Bot").attr("src", "my_stuff/img/LogoPt.png").attr("alt", "Portuguese")
     
        } else
            if (language == "english") {
        $("#Bot").attr("src", "my_stuff/img/LogoEn.png").attr("alt", "English")
        
        } else
            if (language == "spanish") {
        $("#Bot").attr("src", "my_stuff/img/LogoEs.png").attr("alt", "Spanish")
       
        }
        if (dictionary.hasOwnProperty(language)) {
            set_lang(dictionary[language]);
        }
    });

    // Set initial language to English
    set_lang(dictionary.english);

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<select id="lang">
    <option>English</option>
    <option>Portuguese</option>
    <option>Spanish</option>
</select>
<span data-translate="_hello">Hello</span>, 
<span data-translate="_january">January</span>!
<br>
<br>
<img id="Bot" src="my_stuff/img/Logo.png" class="img-circle img-responsive" alt="english">

感谢朋友们的努力。

【讨论】：